initial commit

1 files changed, 231 insertions, 0 deletions

diff --git a/files/es/web/css/_doublecolon_before/index.html b/files/es/web/css/_doublecolon_before/index.html
new file mode 100644
index 0000000000..3f75cb9266
--- /dev/null
+++ b/files/es/web/css/_doublecolon_before/index.html
@@ -0,0 +1,231 @@
+---
+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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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>