Pseudo contenido con CSS

11/Dic/2013 233

La propiedad CSS content: «»; viene siendo utilizada para entregar más estilos donde no necesitas extra marcado con HTML. Su soporte es amplio (IE8+ y demases browsers modernos). Su uso está atado a los pseudo-elementos :after y :before y permite generar contenido (de tipo texto) en dicho pseudo-elemento. Un ejemplo básico:

div {
color: blue;
}
div:after {
content: "Link: "
color: gray;
}

Resulta muy útil ya que disponemos de nuevos elementos (vale aclarar que no pertenecen al DOM) los que podemos dar estilos anexos al elemento mismo que estamos manipulando con CSS. Pero este no es el caso de este artículo… (se me ocurre hacer un videocast sobre eso).

Dentro de lo que permite agragarse a través de content está attr(), vale decir, cualquier atributo del elemento que estás manipulando con CSS. Usualmente estás acostumbrado a hacerlo con JavaScript pero en este caso sólo con estilos podemos crear pseudo-elementos y darle contenido nuevo y/o existente. Resulta muy útil si queremos, por ejemplo, hacer un tooltip sólo con CSS rescatando el texto dentro de title:

<a title="Título de este mágico tooltip sólo con CSS3" href="#">tooltip sólo con CSS3</a>
a[title]:hover:after { /* Este es el cuadrado del tooltip que contiene el texto */
content: attr(title);
color: #333;
position: absolute;
left: 50%;
top: -150%;
white-space: nowrap;
z-index: 10;
border-radius: 6px;
background-color: rgba(0,0,0,.7);
color: white;
font-size: .7em;
padding: .1em .5em;
text-shadow: black 1px 1px 0;
}
a[title]:hover:before { /* Este es el triangulo del tooltip */
position: absolute;
top: -4px;
left: 60%;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 7px 7px 0 7px;
border-color: rgba(0,0,0,.7) transparent transparent transparent;
}

Ya en un muy antiguo artículo proponía su uso en hojas de estilos para impresión media="print" donde para mejor accesibilidad a todos los links se entregara como información impresa la URL al que corresponde ese link luego del texto del enlace mismo.

@media print {
a:after {
content: " ( http://www.csslab.cl " attr(href) " ) ";
font-size: small;
}
}

Links:

Comentarios

  1. ivermectin [#]

    buy ivermectin pills Pseudo contenido con CSS | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ stromectol

  2. other drugs similar to tamoxifen [#]

    I know this web page gives quality dependent posts and
    other data, is there any other website which offers these things in quality? https://buszcentrum.com/nolvadex.htm

  3. Gazcheedarap [#]

    viagra pills no prescription

  4. app.gumroad.com [#]

    It is appropriate time to make some plans for the future and it’s time to be happy.
    I’ve read this post and if I could I wish to suggest you few interesting things or tips.
    Perhaps you could write next articles referring to this article.
    I want to read more things about it! asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  5. hydroxychloroquineMt [#]

    side effects of plaquenil chloroquine mechanism of action what is hydrochloroquine

  6. hydroxychloroquine use in michigan [#]

    Great delivery. Great arguments. Keep up the great effort. https://hhydroxychloroquine.com/

  7. my quest bars [#]

    I’m curious to find out what blog platform you’re using?
    I’m having some minor security problems with my latest site and
    I would like to find something more risk-free. Do you have any solutions?
    quest bars http://bit.ly/3jZgEA2 quest bars

  8. gay casual dating site [#]

    gay male dating site https://gaydatingcanada.com/

  9. http://bit.ly [#]

    I’d like to find out more? I’d like to find out more details.

    cheap flights http://1704milesapart.tumblr.com/ cheap flights

  10. ivermectin1.com [#]

    buy ivermectin for humans uk Pseudo contenido con CSS | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin for humans for sale

  11. cialis 40 mg dose [#]

    Wonderful, what a website it is! This webpage provides helpful information to us, keep it up. https://tadalafili.com/

  12. j.mp [#]

    Today, while I was at work, my sister stole my iphone and tested to see if it can survive a 25 foot drop,
    just so she can be a youtube sensation. My apple ipad is now
    broken and she has 83 views. I know this is totally off topic but I had to share
    it with someone! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  13. HenryUnfiP [#]

    gay master slave dating
    icelandic gay dating
    gay dating at the gym

  14. j.mp [#]

    Great delivery. Outstanding arguments. Keep up the good effort.
    ps4 games https://bitly.com/3z5HwTp ps4

  15. http://www.iherb.com/search?kw=questbars [#]

    Everything is very open with a clear description of the challenges.

    It was truly informative. Your website is useful. Many thanks for sharing!
    quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  16. http://coub.com/stories/962966-scoliosis-surgery [#]

    Howdy! Do you use Twitter? I’d like to follow you if that would be
    ok. I’m definitely enjoying your blog and look forward to new updates.
    scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  17. priligy price australia [#]

    Heya! I understand this is somewhat off-topic but I had to
    ask. Does operating a well-established blog like yours take
    a large amount of work? I’m completely new to blogging but I do write in my journal on a daily
    basis. I’d like to start a blog so I can share my experience and thoughts online.
    Please let me know if you have any suggestions or tips for brand new aspiring bloggers.

    Appreciate it! http://www.deinformedvoters.org/dapoxetine-60mg

  18. HenryUnfiP [#]

    gay dating belgie
    gay dating web site
    gay gps dating sites

  19. ufgxuow [#]

    bWEc20 njuzizueiygz, [url=http://cwazttkloemd.com/]cwazttkloemd[/url], [link=http://gavfaekoxlnf.com/]gavfaekoxlnf[/link], http://evyofjyulzmh.com/

  20. stromectolforte.com [#]

    ivermectin without persciption https://stromectolforte.com/# bula ivermectina buy ivermectin for humans

  21. uglhwb [#]

    oHu63i vrhkfbmrscgh, [url=http://ivvfbyjxzpnf.com/]ivvfbyjxzpnf[/url], [link=http://jfxeumiowexc.com/]jfxeumiowexc[/link], http://mexdpyyxiwri.com/

  22. cetirizine side effects over 65 [#]

    prescription strength zyrtec 20 mg – https://allergyd.com

  23. fexofenadine hcl [#]

    cetirizine hcl 10 mg tablet – http://allergyd.com

  24. ivermectin dosage chart for humans [#]

    Non-specific Information Fro this offshoot
    https://ivermectinst.com ivermectin 12 mg
    https://ivermectstromect.com ivermectin amazon
    https://ivermectstromect.com ivermectin over the counter
    https://ivermectstromect.com ivermectin tablets
    https://ivermectstromect.com ivermectina comprar

  25. stromectolforte.com [#]

    ivermectin for humans http://stromectolforte.com/ ivermectin for humans ivermectin

  26. kctskbfwtb [#]

    D2AbpX zdponudaljhx, [url=http://ikhnbtwcviho.com/]ikhnbtwcviho[/url], [link=http://defknhkrnlga.com/]defknhkrnlga[/link], http://kbyoxhbtafce.com/

  27. ivermectin 3 mg [#]

    what pieces of information are considered individually identifiable health information http://stromectolhumans.com – stromectol 3 mg tablets price

  28. stromectolforte.com [#]

    stromectol france https://stromectolforte.com/# ivermectin for humans over the counter skin ivermectin paste 1.87% for humans

  29. prednisonenorx [#]

    prednisolona prednisolone online

  30. can i buy stromectol online canada [#]

    ivermectin 6 no prescription

    bowl hemoptysis literature

  31. bactrim antibiotic [#]

    trimethoprim sulfamethoxazole side effects Trimethoprim 100mg

  32. sztromektol tabletta [#]

    ivermectin for sale http://stromectolforte.com/# ivermectin tablets dosage ivermectin pills otc

  33. GustavoVet [#]

    college essay writing help
    book editing service

CSSLab