path: root/files/es/web/css/_doublecolon_before/index.html

---
title: '::before (:before)'
slug: 'Web/CSS/::before'
tags:
  - CSS
  - Presentación
  - Pseudo-elemento CSS
  - Referencia
  - Web
translation_of: 'Web/CSS/::before'
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">En CSS, <code>::before</code> crea un <a href="/es/docs/Web/CSS/Pseudo-elements">pseudoelemento</a> que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad {{cssxref("content")}}. Este elemento se muestra en línea con el texto de forma predeterminada.</span></p>

<pre class="brush: css  language-css notranslate"><code class="language-css"><span class="comment token">/* Añade un corazón antes de los enlaces */</span>
<span class="selector token">a<span class="pseudo-element token">::before</span></span> <span class="punctuation token">{</span>
  <span class="property token">content</span><span class="punctuation token">:</span> "</code>♥<code class="language-css">"<span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>

<div class="note">
<p><strong>Nota:</strong> Los pseudoelementos generados por <code>::before</code> y <code>::after</code> son <a href="https://www.w3.org/TR/CSS2/generate.html#before-after-content">contenidos por la caja de formato del elemento</a>, y por lo tanto, no aplica a <em><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">elementos de reemplazo</a></em> como los elementos {{htmlelement("img")}}, o {{htmlelement("br")}}.</p>
</div>

<h2 id="Sintaxis">Sintaxis</h2>

{{csssyntax}}

<div class="note">
<p><strong>Nota:</strong> CSS3 introdujo la notación <code>::before</code> (con doble dos puntos) para diferenciar <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo-clases</a> con <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>. Los navegadores aceptan <code>:before</code>, añadido en CSS2.</p>
</div>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Añadiendo_comillas">Añadiendo comillas</h3>

<p>Un ejemplo simple del uso del pseudoelemento <code>::before</code> es el proporcionar comillas. Aquí, usamos <code>::before </code>y <code>{{Cssxref("::after")}}</code> para insertar caracteres de comillas.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush:html notranslate">&lt;q&gt;Some quotes&lt;/q&gt;, he said, &lt;q&gt;are better than none&lt;/q&gt;.</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush:css notranslate">q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}</pre>

<h4 id="Resultado">Resultado</h4>

<p>{{EmbedLiveSample('Añadiendo_comillas', '500', '50', '')}}</p>

<h3 id="Ejemplo_decorativo">Ejemplo decorativo</h3>

<p>Podemos estilizar el texto o imágenes en la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;span class="ribbon"&gt;Notice where the orange box is.&lt;/span&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">.ribbon {
  background-color: #5BC8F7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;
}</pre>

<h4 id="Resultado_2">Resultado</h4>

<p>{{EmbedLiveSample('Ejemplo_decorativo', 450, 60)}}</p>

<h3 id="Lista_de_tareas">Lista de tareas</h3>

<p>En este ejemplo, creamos una lista de tareas simple usando pseudo-elementos. Este método puede ser usado comúnmente para añadir detalles a la interfaz y mejorar su experiencia de usuario.</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li&gt;Buy milk&lt;/li&gt;
  &lt;li&gt;Take the dog for a walk&lt;/li&gt;
  &lt;li&gt;Exercise&lt;/li&gt;
  &lt;li&gt;Write code&lt;/li&gt;
  &lt;li&gt;Play music&lt;/li&gt;
  &lt;li&gt;Relax&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css notranslate">li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js notranslate">var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done');
  }
}, false);
</pre>

<p>Aquí se está ejecutando el ejemplo de arriba. Nótese que no se están usando íconos, y la marca de selección en realidad es el pseudoelemento <code>::before</code> que ha sido estilizado en CSS. Puedes interactuar con el ejemplo para ver los cambios.</p>

<h4 id="Resultado_3">Resultado</h4>

<p>{{EmbedLiveSample('Lista_de_tareas', 400, 300)}}</p>

<h3 id="Caracteres_especiales">Caracteres especiales</h3>

<p>Como esto es CSS y no HTML, <strong>no </strong>se pueden usar entidades de marcado en los valores del contenido. Si se necesita usar caracteres especiales, y no se puede ingresar literalmente en la cadena de contenido CSS, se utiliza una secuencia de escape unicode, consistiendo de una barra invertida seguida de un valor unicode hexadecimal.</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>ol</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Crack Eggs into bowl<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Add Milk<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Add Flour<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span> <span class="attr-name token">aria-current</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">'</span>step<span class="punctuation token">'</span></span><span class="punctuation token">&gt;</span></span>Mix thoroughly into a smooth batter<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Pour a ladleful of batter onto a hot, greased, flat frying pan<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Fry until the top of the pancake loses its gloss<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>Flip it over and fry for a couple more minutes<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span>serve with your favorite topping<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ol</span><span class="punctuation token">&gt;</span></span></code></pre>

<h4 id="CSS_4">CSS</h4>

<pre class="brush: css language-css notranslate"><code class="language-css">
<span class="selector token">li</span> <span class="punctuation token">{</span>
  <span class="property token">padding</span><span class="punctuation token">:</span><span class="number token">0.5</span><span class="token unit">em</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">li<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">aria-current</span><span class="operator token">=</span><span class="token value">'step'</span><span class="punctuation token">]</span></span></span> <span class="punctuation token">{</span>
  <span class="property token">font-weight</span><span class="punctuation token">:</span>bold<span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="selector token">li<span class="attribute token"><span class="punctuation token">[</span><span class="attribute token">aria-current</span><span class="operator token">=</span><span class="token value">'step'</span><span class="punctuation token">]</span></span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" \21E6"</span><span class="punctuation token">;</span> <span class="comment token">/* Hexadecimal for Unicode Leftwards white arrow*/</span>
  <span class="property token">display</span><span class="punctuation token">:</span> inline<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
</code>
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estatus</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}</td>
   <td>{{Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Sin cambios significativos desde la especificación previa.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Transitions", "#animatable-properties", "")}}</td>
   <td>{{Spec2("CSS3 Transitions")}}</td>
   <td>Permite transiciones en propiedades definidas a los pseudo-elementos.</td>
  </tr>
  <tr>
   <td>{{Specname("CSS3 Animations", "", "")}}</td>
   <td>{{Spec2("CSS3 Animations")}}</td>
   <td>Permite animaciones en propiedades definidas a los pseudo-elementos.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Introduce la sintaxis de doble símbolo <code>:</code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Definición inicial, usando la sintaxis de un símbolo <code>:</code></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>

<div>


<p>{{Compat("css.selectors.before")}}</p>
</div>

<h2 id="Véase_también">Véase también</h2>

<ul>
 <li>{{Cssxref("::after")}}</li>
 <li>{{cssxref("content")}}</li>
</ul>