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

The CSS border on a div has inexplicably ceased functioning in Chrome, yet continues to work perfectly in

Is there a way to change an element's display to 'block'? (see more information below)

Using a PHP variable to dynamically change the style sheet by connecting to a MySQL database

What is the best way to assign a unique color to each circle?

I created a customized version of jQuery tabs, but I am looking for an external link to display the tab content and to style the original navigation

What is the best way to delete a container when its child element includes a specific string?

Newspaper-style text layout with Bootstrap columns

Using AJAX to submit an HTML form containing a file input

What is the best way to ensure a floated image matches the height of its parent container?

Returning draggable elements to their original placement

What could be the reason behind my jQuery UI buttons suddenly appearing oversized and lackluster?

Is it possible to modify CSS properties by clicking on buttons?

Obtaining the width of a child table using Jquery

Strange rendering in CSS JQuery Datatable

How to center a span using Twitter Bootstrap

The nested ThemeProvider takes priority over the theme's style definitions

Ways to effectively hide one window or pop-up upon clicking another

Utilize SCSS values within TypeScript by applying them on a class level

Trigger the function in ng-change each time the same option is clicked repeatedly

Issue with cutting of rotating pseudo element