Question 45806 in CSS Question posted in
Some basic documentation can be found here.

How to limit width of underline and fix the position to middle? – CSS

I have tried to add an underline to a header of a website I have been developing. This underline works while hovering or active page, the problem is that I could not figure out to center the underline to the text if I change the width property

The website is https://www.faithful-farming.com/

And the code is the following:

elementor-item:after {
background-color: #E98B0D !important;
height: 5px;   
content: "";
bottom: 0;  
width: 100%;    
left:0;   
border-radius: 4px;
line-height: 2px;  
}

So if I change the width: from 100% to 80%, it is not centered it and is set to the left due to left:0; I tried to use align center but I don’t know why is not working.

  • Problem: if I change the size, it will not center it.
Tags:

2

Answers


  1. 0

    If you wish to center an element that is less than 100% width, you can not set the left margin to 0. Simply change the width to 80% and the left margin to auto or 10%.

    background-color: #E98B0D !important;
height: 5px;   
content: "";
bottom: 0;  
width: 80%;    
left:10%;   
border-radius: 4px;
line-height: 2px;  
}```
    Login or Signup to reply.
  2. 0

    Since your site is not set to public, I can only assume what exactly you want. Depending on the properties of the elementor-item itself, try the following:

        .myElement::after {
        content: "";
        display: block;
        margin: 0 auto;
        width: 80%;
        height: 5px;
        border-radius: 4px;
        background-color: #E98B0D !important;
    }

    If you now change the width of the pseudo element, the underline remains centered.

    Note: .myElement must have a width set!

    Here’s a fiddle: https://jsfiddle.net/qfo2xjrh/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search