Los pseudo-elementos :before y :after permiten agregar estilo a la página web sin agregar marcas innecesarias. El contenido SVG se puede agregar utilizando estos pseudoelementos siguiendo los métodos que se describen a continuación:
Método 1: usar la propiedad de imagen de fondo: la propiedad de imagen de fondo se usa para establecer una o más imágenes de fondo en un elemento. También podemos agregar el contenido SVG usando esta propiedad y dejando la propiedad de contenido vacía. Las otras propiedades de CSS ayudan a posicionar y dimensionar el contenido correctamente.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.svg-demo {
text-align: center;
font-weight: bold;
font-size: 20px;
}
.text {
text-align: center;
}
/* Using the :before pseudo-element
to add the SVG content */
.svg-demo:before {
display: inline-flex;
content: '';
/* Using the background-image and
its related properties to add
the SVG content */
background-image: url('gfg_logo.svg');
background-size: 40px 40px;
height: 40px;
width: 40px;
}
/* Using the :after pseudo-element
to add the SVG content */
.svg-demo:after {
display: inline-flex;
content: '';
/* Using the background-image and
its related properties to add
the SVG content */
background-image: url('gfg_logo.svg');
background-size: 40px 40px;
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<p class="svg-demo">
This is the normal content
</p>
<p class="text">
The SVG images are added before
and after the line using :before
and :after pseudo-elements
</p>
</body>
</html>
Producción:
Método 2: usar la propiedad de contenido: la propiedad de contenido en CSS se usa para generar contenido dinámicamente en una página de manera conveniente. Podemos agregar el contenido SVG usando esta propiedad en un pseudo-elemento vacío. Las otras propiedades de CSS ayudan a posicionar y dimensionar el contenido correctamente.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.svg-demo {
text-align: center;
font-weight: bold;
font-size: 20px;
}
.text {
text-align: center;
}
/* Using the :before pseudo-element
to add the SVG content */
.svg-demo:before {
/* Using the content property to
set the background image */
content: url('gfg_logo.svg');
/* Using the zoom property to
control the size of the SVG */
zoom: 25%;
}
/* Using the :after pseudo-element
to add the SVG content */
.svg-demo:after {
/* Using the content property to
set the background image */
content: url('gfg_logo.svg');
/* Using the zoom property to control
the size of the SVG */
zoom: 25%;
}
</style>
</head>
<body>
<p class="svg-demo">
This is the normal content
</p>
<p class="text">
The SVG images are added before
and after the line using :before
and :after pseudo-elements
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por saideepesh000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA