Wie die text-Dekoration: unterstreichen Sie mit 2px padding?

Ich wie ein gehorsamer frotend-Entwickler erstellen müssen, unterstreichen mit 2px padding anstelle von 1px standardmäßig. Existieren einfache Lösung für dieses?

PS Yeahh Jungs, ich weiß über das div mit der schwarzen backgrond Farbe und 1px * Npx und position: relative, aber Es wird so langsam...

InformationsquelleAutor der Frage NiLL | 2011-11-07

  1. 24

    Könnten Sie wickeln den text in einem span und geben Sie es ein border-bottom mit padding-bottom:2px;.

    Wie so

    span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

    Beispiel: http://jsfiddle.net/uSMGU/

    InformationsquelleAutor der Antwort Jason Gennaro

  2. 9

    Eine großartige Möglichkeit, dies zu tun, ohne Zugabe und extra spannen und mit mehr Kontrolle über die :after - Selektor.

    Nützlich, vor allem für die navigation in Menüs:

    .active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

    Wenn Sie wollen, mehr oder weniger Platz zwischen text und unterstreichen, fügen Sie ein margin-top.

    Wenn Sie möchten, eine dickere unterstreichen, fügen Sie mehr height: 

    .active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

    InformationsquelleAutor der Antwort jake

  3. 6

    wie über die Verwendung border-bottom:1px; padding:what-you-likepx

    InformationsquelleAutor der Antwort Alex

  4. 0

    Diese ist meine Lösung...

    HTML

    <p>hola dasf  hola dasdsaddasds dsadasdd<span></span></p>

    CSS 

    p {
  color: red;
  text-decoration: none;
  position: absolute;
}
a:hover {
    color: blue;
}
p span {
    display:block;
    border-bottom:3px solid black;
    width: 50%;
    padding-bottom: 4px;
}

    InformationsquelleAutor der Antwort Daniel Hidalgo

  5. 0

    Ich verwendet @jake Lösung, aber es gab mir Mühe mit der Ausrichtung in der horizontalen.

    Meine nav-links sind die flex-Zeile, zentriert ausgerichtet und seine Lösung verursacht das element nach oben verschieben, um zu bleiben horizontal zentriert ausgerichtet.

    Ich es behoben, indem dies zu tun:

    a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      //margin and height should
  height: 0.4rem;          //add up to active link margin
  background: $e1-red;
  display: block;
}

    Dies wird pflegen Sie die horizontale Ausrichtung für Sie.

    InformationsquelleAutor der Antwort agm1984

Schreibe einen Kommentar