Unique border-bottom width measurements available

Question

Unique border-bottom width measurements available

Seeking assistance with a design challenge, further details are available in the screenshot I've provided.

I am attempting to apply a unique border bottom style to or text, with specific width specifications that do not span the entire word length.

The complexity arises from the fact that the text is centered on the page, and there will be multiple texts of varying lengths that require this special treatment.

I have considered three potential solutions:

1) Implement a border-bottom, but how can I adjust the width for texts of different lengths?

2) Utilize an hr element, however aligning it directly under the word proves challenging when centering the text on the page.

3) Experiment with a :after property, though there remains uncertainty about ensuring the line appears exactly at the start of the word as desired.

Any recommendations on achieving the effect shown in the screenshot attached?

https://i.stack.imgur.com/GOG8M.png

Thank you in advance for your suggestions and valuable insights! Francesco

html css

Answer 1

Answer №1

Here's a suggestion to achieve the desired effect:

h1{
  position: relative;
}

h1::before{
  content: "";
  background: red;
  width: 30px;
  height: 2px;
  position: absolute;
  bottom: -5px;
}

<h1>This is the heading</h1>

Answer 2

Here's a suggestion to achieve the desired effect:

h1{
  position: relative;
}

h1::before{
  content: "";
  background: red;
  width: 30px;
  height: 2px;
  position: absolute;
  bottom: -5px;
}

<h1>This is the heading</h1>

Answer 3

Answer №2

To highlight specific letters with an underline, enclose them in a tag and apply a border-bottom style to that span element

Answer 4

To highlight specific letters with an underline, enclose them in a tag and apply a border-bottom style to that span element

Answer 5

Answer №3

Utilized the :after pseudo element in this example

h1::after{
  content: "";
  background: red;
  width: 40px;
  height: 5px;
  display: block;
}

<h1>This is the title</h1>

Answer 6

Utilized the :after pseudo element in this example

h1::after{
  content: "";
  background: red;
  width: 40px;
  height: 5px;
  display: block;
}

<h1>This is the title</h1>

Unique border-bottom width measurements available

Answer №1

Answer №2

Answer №3

Similar questions

Dynamic collapsible containers

Transforming HTML features into PHP scripts. (multiplying two selected values)

Display a button within a table depending on the content of adjacent cells

Can you create a dynamic visual display using HTML5 Canvas to draw lines in a circular pattern that react

I'm having trouble getting my jQuery click handler to work

Converting Greek text to UTF-8 using Javascript

Spinning an SVG circle using a group element

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

Mobile phone experiencing issues with background loop video playback

Tips on organizing elements

Simultaneous Activation of Hover Effects on Multiple Elements

showing database table contents on a website page

I'm seeking assistance in enhancing this code within tb for extracting values using JavaScript

Whenever I attempt to include additional drop-down lists, jQuery fails to function

The mat-table fails to populate with data retrieved from the rest service

Adjust the navigation text and logo color as you scroll on the page

Displaying a Facebook iframe on the left side of the page

Content from ajax request is invalid

I am having trouble understanding why dropdown menus with the same content have varying widths

Leveraging the :checked state in CSS to trigger click actions