Nur Strich rot, nicht Wort.

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich würde gerne nur den Strich rot färben und nicht den unterstrichenen Text.
Wie bekomme ich das hin, bzw. ist das überhaupt möglich?
Mein jetziger Code dafür:

u {
color: red;
font-weight: bold;
}

http://i.epvpimg.com/IWcPd.png

2 
border-bottom: red;
3

Naja… nicht mein erwünschtes Ergebnis.
Möchte, dass der Strich nur unter meinem Wort ist.

Mein Code:
http://i.epvpimg.com/7AFyh.pnghttp://[URL=http://epvpimg.com/7AFyh]http://i.epvpimg.com/7AFyh.png
Mein Ergebnis:
http://i.epvpimg.com/1J3Ue.png

4

Dann musst Du jetzt irgendetwas an deinem HTML-Code geändert haben was Du uns gerade vorenthältst. In deinem Eröffnungstopic steht etwas von einem -Element im CSS-Code. Da das ein Inline-Element ist, wäre das auch das prädestinierte Element (weil es ein Inline-Element ist welches deinen Text umgibt) für die von mir vorgeschlagene CSS-Eigenschaft. Anstelle des kannst Du natürlich auch jedes andere beliebige Inline-Element verwenden (wie span, i, strong …). Wenn Du das nun fälschlicherweise der Überschrift zuordnest geht der Strich natürlich unterhalb des gesamten Block-Elements entlang.

5

http://[URL=http://epvpimg.com/gRrWc]http://i.epvpimg.com/gRrWc.png http://i.epvpimg.com/Rsbbd.png[/URL]
[URL=http://epvpimg.com/gRrWc]http://i.epvpimg.com/gRrWc.png[/URL]

6

Warum um alles in der Welt postest du eine Grafik von deinem Quellcode? Warum nicht den Quellcode selber?

7

[SIZE=7]Index.htm[/SIZE]

*SEITE* [/li]

Startseite

  • Startseite
    • [/li]

[SIZE=7]Design.css[/SIZE]
[SIZE=7][/SIZE]
[SIZE=4]body {
background: url(LINK);
}

  • {
    padding: 0;
    margin: 0;
    }
    nav {
    background-color: black;
    height: 50px;
    }
    nav ul {
    height: 50px;
    width: 450px;
    }
    nav ul li {
    list-style-type: none;
    width: 150px;
    float: left;
    text-align: center;
    font-family: Arial;
    font-size: 20px;
    }
    li a {
    text-decoration: none;
    color: white;
    line-height: 50px;
    display: block;
    }
    li a:hover {
    font-weight: bold;
    background-image: url(LINK);
    }
    h1 {
    font-size: 26pt;
    font-family: Amatic SC, cursive;
    color: white;
    font-size: 80px;
    text-align: center;
    }
    h2 {
    border-top: solid gray 10px;
    border-left: solid gray 10px;
    }
    p {
    text-align: center;
    font-size: 40px;
    font-family: Amatic SC;
    color: white
    }
    .test {
    color: red;
    background-color: black;
    font-weight: bolder;
    }
    .test2 {
    background-color: yellow;[/SIZE]

[SIZE=7][/SIZE]
[SIZE=7][/SIZE]

8

https://jsfiddle.net/hryzfnhy/