Horizontal Rule - Hvordan styler jeg den så den har et ikon i midten?

Pjat, det kan sagtens gøres med 1 element. Juster selv billed og % så det passer med bredten på stregerne.

Eksempel her og kode forneden:

 <hr class="speechbubble" />

 .speechbubble {
     position: relative;
     border: 0;
     height: 128px;
     background-image: url(https://cdn0.iconfinder.com/data/icons/gloomy-office/512/679600-Messages-32.png);    
     background-repeat: no-repeat;
     background-position: center center;
 }
 
 .speechbubble:after,
 .speechbubble:before {
     overflow: auto;
     margin: auto;
     position: absolute;
     width: 45%;
     height: 0px;    
     top: 0; 
     left: 0; 
     bottom: 0; 
     content: "";
     border-top: 1px solid #ccc;
 }
 
 .speechbubble:before {
     right: 0;
     left: auto;
 }

Du kan ikke gøre det med <hr> da elementet principielt ikke har nogen højde. <hr> bliver også tegnet forskelligt mellem hver browser.

Jeg ville nok gøre det med et eller to <div> elementer.

Michael, det kommer vel helt an på om Martin vælger at style <hr />?

Jeg har prøvet at lave et eksempel efter dit ønske Martin, du kan evt. smide koden ind i et html dokument og selv rette til efter ønske det kan sikkert gøres kortere, dette er blot et udkast:

 <style type="text/css">
 hr{
     border:                none;
     border-top:            1px #cccccc solid;
 }
 
 .horiz_rule{
     width:                100%;
     height:                1px;
     position:            relative;
     margin-top:            40px;
 }
 
 .white_box{
     width:                50px;
     height:                24px;
     position:            absolute;
     top:                -12px;
     left:                50%;
     margin-left:        -30px;
         padding-left:    20px;
     background-color:    #fff;
 }
 </style>
 
 <div class="horiz_rule">
 <div class="white_box">
     <img src="BILLEDE_URL" />
 </div>
 <hr />
 </div>

Hej Martin.

Jeg fanger ikke helt hvad du ville, det lyder som om du ville lave en slide animation af det ikon du har fundet på hr elementet.

Hvis jeg var dig ville jeg nok lavet det i stil med.

#Lav en div, og sæt dens width til 100% og højde til det antal pixels du ville have.

#Sæt diven til position: relative

#Lav et hr element inde i diven, sæt denne vertikalt i midten og width 100%

#Style dit hr element. Højde, farve mm.

#Sæt dit ikon til position absolute, så den ligger i venstre side ovenpå hr elementet (slide).

#Sæt eventuelt den animation på som du ville have.

@lasse... læg mærke til "principielt". :o)

ca. samme formulering for et <a> der principielt ikke er en knap. Men du kan sagtens bruge css til at lave det til en knap. ;o)

....

Men da browsere tegner <hr> elementer forskelligt, selv med CSS, bliver det besværligt at arbejde med. Og det semantiske du opnår, kan også opnåes med <section> elementer. Fordi <hr> elementer indikerer et tema-skifte i den artikel du læser. Og så lange bliver sider, på nettet, meget sjældent.

Jeg ville lave en simpel kode (Selvfølgelig uden inline-styling):

<div style="position: relative; height: 1px; background: #ccc;"><img style="position: absolute; left: 50%; margin-top: -12px; margin-left: -12px;" /></div>

@Michael Larsen OBS!, det overså jeg min fejl..

Hej allesammen

Tak for hjælpen, Jeg har brugt Dans løsning, da det virkede meget enkelt og lige til. Vidste ikke det med :before og :after.

Kan i ikke lige forklare mig hvad det er præcist de gør (kunne måske også bare google det )

:before og :after er pseudo elementer og ligger før og efter det element som du styler dem på. Selvom mange siger de er css3, så er de faktisk en del af css2.1 og virker derfor også med ie8 (dog med lidt små issues)

::before/::after er CSS3, :before/:after er helt tilbage til CSS2 (http://www.w3.org/TR/1998/WD-css2-19980128/) - :: blev implementeret for at omgås forvirringen mellem before og after som pseudo-elementer eller -classes.. Issues kan der let søges efter, men vi taler blot om z-indexering og hover-state og sådan (IE8), og som dan siger, er det blot småting.

Lige for at supplere dan, som også kom med den løsning jeg synes mest favorabel