Tell me, please, how to implement the underline thickness of the link and place the line under the link text? link

    4 answers 4

    For this there is a box-shadow property

     .cool_link { color: red; font-size: 30px; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1); text-decoration: none; } 
     <a class="cool_link" href="#">Ссылка</a>

    • one
      add for the link href and see the result - Grundy
    • @Grundy and that, so hard to add text-decoration: none; ? OK, corrected the answer. But the question was not about that at all. - KAGG Design
    • of course difficult! you had nothing to say about it. The question was about underlining, but you didn’t change the underlining without adding href, you simply removed it, and actually replacing the element with another one wouldn’t change anything. But the question was specifically about the link. - Grundy

    For example, so .
    A boxing expense is expensive)
    And it can slow down the page on mobile phones. You need to use it with great intelligence, not to waste it on underscores for links of some kind.

     p { position: relative; display: inline; font-size: 14pt; font-family: sans-serif; } p::before { position: absolute; z-index: -1; top: 50%; left: 0; border-bottom: 10px solid red; width: 100%; } p:hover:before { content: ""; } 
     <p>Ссылка</p>

    • There are reliable sources where to read about the "box-shadow costly) And can slow down the page on mobile phones"? - SeVlad
    • @SeVlad, I have not found an example, which I myself have watched. But there were blocks, 400 pieces on the page, which had a box-shadow, and it was they who slowed down the page by simply scrolling. And there were also given simple ways to solve the problem, such as not using the boxing box at the element at transit and all that. Actually, I just think it is easier to draw a pseudo-element than a whole blur filter from an element. - VostokSisters
    • @VostokSisters probably because it is expensive, it is used by WP in the standard theme twentyseventeen. However, I have a vague suspicion that the developers of this topic understand better what is expensive and what is not. - KAGG Design
    • @VostokSisters, I don’t really believe, but somehow it’s hard to assume that css can cause brakes. No, hypothetically admit - rendering and all that, but it is unlikely that browser vendors, while supporting standards, have allowed it. But in principle, there are different cases. It is interesting to look at the nature of this occurrence .. If it is true of course - SeVlad
    • In this case, @KAGG Design (the use of css and etc.), the developers of VPs and themes are not an example and not an indicator :). In the admin after the update to 47 in the autoplay already 3 videos. That hangs firefox and loads the CPU up to 100%. Well, many more shoals in the construction of faces. So that the usabilityists are still there .. :) here is the topic on the forum ru.wordpress.org/support/topic/… - SeVlad

     .b-group-link { text-align: center; } a { font-size: 25px; display: inline-block; vertical-align: top; margin: -8px 0 10px; text-decoration: none; line-height: 1.5; } a > span { border-bottom: 7px solid #f00; transition: .3s; } a > span > span { position: relative; top: 8px; } a:hover > span { border-bottom-color: green; } 
     <div class="b-group-link"> <a href="#"><span><span>link text text</span></span></a> <br> <a href="#"><span><span>link text text<br> link text text</span></span></a> </div>

      So it will be exactly as you wanted:

       .underline{ color: magenta; font-size: 58px; font-weight: 900; box-shadow: inset 0 -25px 0 0 #0b013e; }

      Found another interesting option, look at it, it is more correctly implemented, and without box-shadow:

      https://stackoverflow.com/a/26002260/7489927