Contenido - Trucos CSS

Anonim

La contentpropiedad en CSS se usa junto con los pseudo-elementos ::beforey ::after. Se utiliza para insertar contenido literalmente. Puede tener cuatro tipos de valores.

Cuerda

.name::before ( content: "Name: "; )

Entonces un elemento como este:

 Chris

Se renderizaría así:

Name: Chris

También podría ser una cadena vacía, que se ve comúnmente en cosas como clearfix.

Encimera

div::before ( content: counter(my-counter); )

Más información sobre eso.

Imagen

div::before ( content: url(image.jpg.webp); )

Esta es literalmente una imagen en la página como sería. También podría ser un degradado. Tenga en cuenta que no puede cambiar las dimensiones de la imagen cuando se inserta de esta manera. También puede insertar una imagen usando una cadena vacía para el contenido, haciéndola display: blockde alguna manera, dimensionándola y usando background-image. De esa manera, podría cambiar su tamaño con background-size.

Atributo

Puede usar valores (cadenas, de todos modos) que se toman directamente de los atributos en el HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

La attr()función no tiene "tipos" todavía, por lo que no puede pasar un valor como 20px(solo cadenas), ¡pero algún día!

Texto alternativo

La especificación dice que puede usar a /en la sintaxis para listar texto alternativo. Por ejemplo…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Quizás podrías usarlo como ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Más información

El contenido insertado de esta manera no está realmente en el DOM, por lo que tiene algunas limitaciones. Por ejemplo, no puede adjuntar un evento directamente (solo) a un pseudoelemento. También es inconsistente si el texto insertado de esta manera es leído por lectores de pantalla (generalmente lo es en estos días) o si puede seleccionarlo (generalmente no lo es en estos días).

  • Cosas interesantes que pueden hacer los elementos de pseuedo
  • Presentación sobre pseudo elementos
  • Documentos de MDN

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

Escritorio

Cromo Firefox ES DECIR Borde Safari
4 2 9 12 3.1

Móvil / Tablet

Android Chrome Android Firefox Androide Safari de iOS
88 85 2.1 3.2

Para Opera, url()solo es compatible con la versión 7+.