0

How can I transfer the red stripe under the text?

enter image description here

.nav-menu > ul > li > a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 7px;
    bottom: 5px;
    left: 0;
    background-color: #ff1900;
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
}
Leo
  • 2,097
  • 21
  • 35
Varlant1n
  • 1
  • 2
  • if your question is regarding moving the red line around the selected menu item you would need some js to achieve that effect in a easier way – Jorge Guerreiro Jan 08 '21 at 11:39
  • Maybe read this article https://www.w3schools.com/cssref/pr_text_text-decoration.asp or specify your question – zerbene Jan 08 '21 at 11:40

2 Answers2

0

You can do border-bottom: 5px solid red; if you want the red bar under the text

ObscurusLux
  • 370
  • 3
  • 14
  • I've tried it this way, but it doesn't work. I need the line that I have now to be below the text, with the same layout as in the photo. – Varlant1n Jan 08 '21 at 11:45
0

I think text-decoration: underline red; should give you the wanted effect.

It may be useful if you'd share the code (with a snippet on codepen for example) and/or specify better the question; Maybe you're trying to modify a wrong element, if it's possible you could add a class to the single element if you need the stripe just under the home text

ANewbieDeveloper
  • 88
  • 5