What is the best way to position the underline to appear beneath the second line in mobile view?

I have successfully incorporated a code to add a blue underline to the company name. However, in mobile view, the blue line appears on the first line. How can I adjust it so that it starts from the second line?

Below is my CSS code:

 label {
  margin: 0;
   cursor: pointer;
  position: relative;
  text-decoration: none;
  color: $text-default-color;
  margin-right: 25px;

  @media #{$sm-and-less} {
    display: flex;
    justify-content: space-between;
  }

  &:after {
    @extend %nav-underline;
    @extend %ease;
  }

Here is the preview image: https://i.sstatic.net/6YHJF.png

htmlcsssass

Answer №1

If you want to achieve a similar effect, you can try the following approach:

label {
  position: relative;
  display: block;
  padding-bottom: 8px;
  margin-bottom: 30px;
}

label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 40px;
  height: 4px;
  background-color: blue;
 }
<label>
  On one line Lorem ispum dolor sit amed
</label>

<label style="width: 100px;">
  On two lines Lorem ispum
</label>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered when trying to attach a hover event to the items in a comb

Currently, I am facing a specific situation. The requirement is to display a custom tooltip when the mouse hovers over the combobox items (specifically the "option" tag). Initially, my solution involved using the title tag. While this method worked effecti ...

javascriptjqueryhtmlinternet-explorer

Tips for emphasizing active tabs in Angular 6

**I have everything displaying perfectly, but I am wondering how to highlight the active tab without using any third-party components. Any assistance would be greatly appreciated. Thank you.** <ul class="tabs"> <li [ngClass]=" {'active-tab ...

htmlangular

Generating HTML widgets dynamically with jQuery: A step-by-step guide

Looking for a way to display an interactive widget on your page while allowing users to generate multiple instances and interact with them simultaneously? Imagine having a widget like this: <div id="my_widget"> <script type="text/javascript" ...

javascriptjqueryhtmlajaxwidget

The horizontal scrolling feature will not activate

I meticulously followed the instructions in a YouTube tutorial to implement this code. What's puzzling is that while the code works perfectly for the person in the video, allowing the grid items to scroll to the right, it doesn't have the same ef ...

htmlcssflexbox

Customizable Designs in Oracle Application Express version 4.2

In my work supporting the organization, I am using APEX 4.2 to create a Training Calendar. While I am not a DBA or programming expert, I have been learning through trial and error. The calendar is already set up, but I am looking for a way to customize ho ...

csssqloracle-apex

Ways to extract the coordinates for slices positioned around the circumference of a pie chart

Currently, I am working on designing a pie chart with D3 using d3.layout.pie(). The image resembles the one displayed below, but without the black dots. These dots were added manually in Photoshop to highlight an issue that I am facing. I am curious about ...

javascripthtmld3.js

Picking out specific SharePoint components using jQuery

I encountered an issue with making my two radio boxes readonly. To resolve this, I attempted to disable the unchecked option. Despite trying to access the elements using jQuery and reviewing the data from the console, the solution did not work as expected. ...

javascriptjqueryhtmlsharepointjquery-selectors

Creative ways to use images as borders with CSS in React JS

import React, { Component } from 'react'; class BigText extends Component { constructor(props) { super(props); this.state = { title: '', text: '', summary: '' ...

javascriptcssreactjs

Validation (CSS 2.0): The CSS property name 'mso-number-format' is unrecognized and invalid

I am currently tasked with maintaining an ASP .Net application that includes a feature to export HTML tables to Excel. The HTML code includes elements like this: <td style="mso-number-format:\@;"> During the build process, I encounter an error s ...

cssexport-to-excel

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

javascripthtmlcsshtml-tablemodal-dialog

Having problems with loading @font-face in Ionic Framework Android app build?

While working on an app in Ionic Framework, I encountered a peculiar issue. https://i.stack.imgur.com/xk8uD.png In my Ionic Framework application, I am importing @font-face and running the app on an Android device (Galaxy SIII). Strangely, the font (Mont ...

androidcssangularjsionic-frameworkfont-face

Troubleshooting issue: Dropdown menu malfunctioning after using replaceWith() and appendTo()

I could really use some assistance. Admittedly, my knowledge of php, js, jquery, and similar languages is limited. I am currently working on a small web application where users fill out a form with specific requests, the data is then stored in a database, ...

javascripthtmljqueryreplacewith

Setting the thumbnail image for an HTML5 video: A step-by-step guide

Is it possible to set a thumbnail image for an HTML5 video? I would like to display an image before the video starts playing. Here is my current code: <video width="470" height="255" controls> <source src="video.mp4" type="video/mp4"> ...

htmlhtml5-videopreloading

Discovering a sophisticated way to locate a span element using the not(p) selector in Selenium

Within a span element with an ID, there is a mixture of text and a paragraph tag. The goal is to use selenium webdriver to pinpoint the street address in the mix below: <span id="myspan"> <p>fullname</p> street address - has no ...

javahtmljquery-selectorsselenium-webdrivercss-selectors

Malfunctioning carousel

I've been attempting to set up a carousel, but it's not functioning properly. I'm unsure of where the issue lies. The navbar section is working fine, but the carousel isn't appearing at all. Should the carousel be placed above the navba ...

jqueryhtmltwitter-bootstrap

Tips for effectively utilizing an if/else structure to animate fresh content from the right while smoothly removing old content by sliding it to the left

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

javascriptjqueryhtmlcss

barchart rendered in SVG without the use of any external libraries

Creating a stacked barchart with SVG and HTML without relying on any third-party library has been quite a challenge. Despite searching extensively online, I have not come across a single resource that demonstrates how to build a stacked bar chart using pla ...

javascripthtmlcssreactjssvg

Using Bootstrap 4 to create a fixed-top navbar and other sticky-top elements

Check out the reproduction here: https://jsbin.com/lawafu/edit?html,output Could this be a bug, an error, a challenge, or an unattainable concept? Prior to scrolling: After scrolling: What I require: Essentially, I need the sidebar to remain visible a ...

htmlcsstwitter-bootstrapbootstrap-4sticky

What is the best way to incorporate a linear gradient into the background image using bootstrap?

I'm working on a react app and I'd like to apply a linear gradient of 0.7 to the background image using bootstrap. Can anyone help me with this? <Carousel.Item> <img className='banner-bg d-block w-100 bg-dark bg-gradient &apo ...

cssreactjsreact-bootstrapbootstrap-5

Concealed image lurking beneath navigation bar

My navbar displays an image below it, but the top part of the image is cut off. The desired outcome is for the image to start at the bottom of the navbar to prevent any cropping issues. This becomes more noticeable as the screen size decreases. I attempted ...

htmlcss