Jak zwiększyć różnicę między tekstem a podkreśleniem w CSS

306

Czy po text-decoration:underlinezastosowaniu tekstu CSS można zwiększyć odległość między tekstem a podkreśleniem?

css underline maks
źródło
1
To nie jest dokładnie to, o co prosiłeś, ale była ciekawa lektura na ten temat: CSS Design: Custom Underlines
Peter Rowell,
Odległość zależy od użytej czcionki. Wypróbuj czcionki internetowe.
Aleksiej Danchenkov
1
CSS3 ma obecnie wiele nowych właściwości do dekorowania tekstu. Sprawdź alligator.io/css/text-decoration Przykład: text-underline-position: under;i text-decoration-skip: ink;pamiętaj, że prawdopodobnie nie jest to wstecznie kompatybilne ze starszymi przeglądarkami.
chocolata
1
Kolejne dobre rozwiązanie
w3spi
1
Głosuj text-underline-offsettutaj: bugs.chromium.org/p/chromium/issues/…
Mark Fisher

Odpowiedzi:

356

Nie, ale możesz iść z czymś takim jak border-bottom: 1px solid #000i padding-bottom: 3px.

Jeśli chcesz tego samego koloru „underline” (co w moim przykładzie jest obramowanie), po prostu opuścić deklarację koloru, to border-bottom-width: 1pxi border-bottom-style: solid.

W przypadku multilinii możesz zawinąć tekst multilinii w rozpiętość wewnątrz elementu. Np <a href="#"><span>insert multiline texts here</span></a>wtedy wystarczy dodać border-bottomi paddingna <span>- Demo

chelmertz
źródło
3
Moim jedynym problemem związanym z tą sztuczką jest użycie linii o wysokości równej wysokości div, a następnie wyrównywanie w pionie: środek; aby go wyśrodkować, nie mogę użyć tej sztuczki, ponieważ wtedy podkreślenie kończy się poniżej div.
deweydb
@deweydb: Co powiesz na dodanie dolnego wypełnienia do div pojemnika? jsfiddle.net/dYfjc/1
chelmertz
+1 Nie wiedziałem o pozostawieniu właściwości color, aby odziedziczyć kolor czcionki - to pozwoli zaoszczędzić dużo potu i łez w przyszłości!
Larry,
9
Nie jestem pewien, dlaczego ta odpowiedź ma tak wiele pozytywnych opinii. Nie działa to całkowicie z tekstami wielowierszowymi.
3
W przypadku multilinii możesz zawinąć tekst multilinii w rozpiętość wewnątrz elementu. Np. Po <a href="#"><span>insert multiline texts here</span></a>prostu dodaj obramowanie do dołu i dopełnienie <span>. jsfiddle.net/Aishaterr/vrpb2ey7/1
Daniel Hernandez
133

Aktualizacja 2019: Grupa robocza CSS opublikowała wersję roboczą dekoracji tekstu na poziomie 4, która dodałaby nową właściwość text-underline-offset(a także text-decoration-thickness), aby umożliwić kontrolę nad dokładnym umieszczeniem podkreślenia. W chwili pisania tego tekstu jest to szkic na wczesnym etapie i nie został zaimplementowany przez żadną przeglądarkę, ale wygląda na to, że ostatecznie sprawi, że technika poniżej stanie się przestarzała.

Oryginalna odpowiedź poniżej.

Problem z wykorzystaniem border-bottombezpośrednio jest to, że nawet w przypadku padding-bottom: 0, podkreślenia wydaje się być zbyt daleko z dala od tekstu wyglądać dobrze. Więc nadal nie mamy pełnej kontroli.

Jednym z rozwiązań zapewniających dokładność pikseli jest użycie :afterpseudoelementu:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

Zmieniając bottomwłaściwość (liczby ujemne są w porządku), możesz ustawić podkreślenie dokładnie tam, gdzie chcesz.

Jednym z problemów z tą techniką, na którą należy uważać, jest to, że zachowuje się trochę dziwnie w przypadku zawijania linii.

ostatnie dziecko
źródło
2
To nie zadziała w przypadku mojego konkretnego problemu, ale to fantastyczna sztuczka. +1
11
Dobra robota, ale to nie zadziała dla kotwic obejmujących wiele linii
Willster
@ last-child Ten jest lepszy niż podkreślenie, ale z zawijaniem tekstu nie zadziała dla każdej linii
Nishantha 18.04.15
Jednym z problemów jest to, że granica i podkreślenie to dwie różne rzeczy. Na przykład, jeśli część tekstu powinna rozciągać się poniżej podkreślenia. Jeśli stylizujesz a-tagi jako przyciski, nie masz żadnej swobody używania obramowania u dołu jako podkreślenia.
Anders Lindén,
10
Wyobraź sobie, że mówisz komuś, kto nie zna się na tworzeniu stron internetowych, projektantowi graficznemu, przeciętnemu użytkownikowi lub twojej mamie, że jest to konieczne, aby dodać kontrolowaną przestrzeń między tekstem a podkreśleniem, a on będzie się zastanawiać, co robisz ze swoim życiem .
MarcGuay
79

Możesz tego użyć text-underline-position: under

Zobacz więcej szczegółów: https://css-tricks.com/almanac/properties/t/text-underline-position/

Zobacz także zgodność przeglądarki .

Duc Huynh
źródło
2
Dzięki! Jeśli próbujesz wykonać podkreślenie przerywane i zobaczysz, że jest rysowany bez spacji między dolną częścią tekstu a linią, oznacza to, że problem został rozwiązany.
Jonathan Cross
6
To poprawna odpowiedź dla nowoczesnych przeglądarek bez żadnego obejścia.
Paras Shah
2
Nie działa w Firefoksie, nawet z prefiksem dostawcy - ale JEST w specyfikacji W3C: w3.org/TR/css-text-decor-3/#text-underline-position-property . Inne odpowiednie zasoby: quackit.com/css/css3/properties/css_text-underline-position.cfm
rosell.dk
4
Od tej chwili działa to tylko w przeglądarce Chrome i nie jest rozwiązaniem dla innych przeglądarek.
miir
2
Cóż, na dzień tego komentarza widzę, że działa to również w przeglądarce Firefox .
Jarad
15

Oto, co działa dla mnie dobrze. 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
Rozwiń fragment kodu

Jordan Starrk
źródło
2
Należy zauważyć, że text-underline-positionnie jest obsługiwany w przeglądarce Firefox zgodnie z developer.mozilla.org/en-US/docs/Web/CSS/…
Floran Gmehlin
Bardzo interesujące. Świetne objaśnienie. Dziękuję Ci!
Jordan Starrk
Obsługiwane w przeglądarce Firefox od 74, zgodnie z tym samym linkiem.
GSerg
11

Wnikanie w szczegóły stylu wizualnego text-decoration:underlinejest dość daremne, więc będziesz musiał przejść przez jakiś hack usuwający text-decoration:underlinei zamieniając go na coś innego, dopóki magiczna, daleko odległa wersja CSS da nam większą kontrolę .

To działało dla mnie:

   a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}
<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
Rozwiń fragment kodu

  • Dostosuj wartości% (81% i 85%), aby zmienić odległość linii od tekstu
  • Dostosuj różnicę między dwiema wartościami%, aby zmienić grubość linii
  • dostosuj wartości kolorów (# 222222), aby zmienić kolor podkreślenia
  • współpracuje z wieloma liniowymi elementami liniowymi
  • działa na dowolnym tle

Oto wersja ze wszystkimi zastrzeżonymi właściwościami dla niektórych kompatybilności wstecznej:

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

Aktualizacja: wersja SASSY

Zrobiłem dla tego mixin scss. Jeśli nie używasz SASS, powyższa zwykła wersja nadal działa świetnie ...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

następnie użyj go w następujący sposób:

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

Aktualizacja 2: Wskazówka Descenders

Jeśli masz jednolity kolor tła, spróbuj dodać cienki text-strokelub text-shadoww tym samym kolorze co tło, aby zejście wyglądało ładnie.

Kredyt

Jest to uproszczona wersja techniki, którą pierwotnie znalazłem na https://eager.io/app/smartunderline , ale od tego czasu artykuł został usunięty.

Squarecandy
źródło
Niestety link eager.io już nie działa. Czy pamiętasz, co było włamaniem, aby zejście wyglądało ładniej?
kano
1
@Kano - Wydaje mi się, że używał cienia tekstowego w tym samym kolorze co jednolite tło.
squarecandy
Ponadto dzięki powyższej technice możesz ustawić kolor podkreślenia inny niż tekst, więc czasami ustawiam go jako jaśniejszy niż tekst, co sprawia, że ​​kolizje z zstępującymi nie stanowią większego problemu dla czytelności.
squarecandy
7

Wiem, że to stare pytanie, ale ustawienie pojedynczego wiersza tekstu, display: inline-blocka następnie ustawienie heightdobrze działało dla mnie, aby kontrolować odległość między ramką a tekstem.

Dominic P.
źródło
1
Nie musiałem ustawiać wysokości. Właśnie owinąłem go w inny div i ponieważ chciałem, aby był wyśrodkowany, po prostu ustawiłem wyrównanie tekstu na out div.
Guy Lowe,
6

Odpowiedź ostatniego dziecka jest świetną odpowiedzią!

Jednak dodanie granicy do mojego H2 spowodowało podkreślenie dłuższe niż tekst.

Jeśli dynamicznie piszesz CSS lub jeśli podobnie jak ja masz szczęście i wiesz, jaki będzie tekst, możesz wykonać następujące czynności:

  1. zmień na contentcoś o odpowiedniej długości (tj. takiej samej

  2. tekst) ustaw kolor czcionki na transparent(lub rgba(0,0,0,0))

aby podkreślić <h2>Processing</h2>(na przykład), zmień kod ostatniego dziecka na:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}
Michael Greisman
źródło
9
H2s to elementy blokowe, które mogą wyjaśniać, dlaczego podkreślenie było dłuższe niż tekst. Może display: inline-blockto naprawi. Zastąpienie tekstu tekstem contentprzypomina włamanie, które może przerwać się na wiele sposobów.
ostatnie dziecko
3

Zobacz moje skrzypce .

Konieczne będzie użycie właściwości width border i padding. Dodałem animację, aby wyglądała fajniej:

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
Rozwiń fragment kodu

Gwiezdny pył
źródło
2

Alternatywą dla tekstów wielowierszowych lub linków jest możliwość zawinięcia tekstu w element wewnątrz bloku. 

<a href="#">
    <span>insert multiline texts here</span>
</a>

możesz po prostu dodać obramowanie do dołu i dopełnienie <span>.

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

Możesz odwołać się do tego skrzypka. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

Daniel Hernandez
źródło
2

Jeśli chcesz:

  • wielowierszowy
  • kropkowany
  • z niestandardową wyściółką u dołu
  • bez opakowań

Podkreślenie, można użyć 1 pikselach wysokość obrazu tła z repeat-xi 100% 100%stanowisko:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

Możesz zamienić drugi 100%na inny pxlub emdopasować pozycję podkreślenia w pionie. Możesz także użyć, calcjeśli chcesz dodać pionowe wypełnienie, np .:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

Oczywiście możesz również stworzyć własny wzór base64 png z innym kolorem, wysokością i wzorem, np. Tutaj: http://www.patternify.com/ - po prostu ustaw szerokość i wysokość kwadratu na 2x1.

Źródło inspiracji: http://alistapart.com/article/customunderlines

mcmimik
źródło
1

Jeśli używasz text-decoration: underline;, możesz dodać spację między podkreśleniem a tekstem za pomocątext-underline-position: under;

Aby uzyskać więcej informacji o właściwościach podkreślenia tekstu, możesz zajrzeć tutaj

Ifrah
źródło
0

Udało mi się to zrobić za pomocą U (tag podkreślenia)

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>
Arun Prasad ES
źródło
0

Oto, czego używam:

HTML:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
Constantinos Constantinou
źródło
0

Czego używam:

<span style="border-bottom: 1px solid black"> Enter text here </span>
Francis Acosta
źródło