selectores - selector de hijos css
Cómo insertar un salto de línea antes de un elemento usando CSS (14)
Agregue un margin-top:20px; para #restart O cualquiera que sea la brecha de tamaño que considere apropiada. Si se trata de un elemento en línea, tendrá que agregar display:block o display:inline-block aunque no creo que inline-block en inline-block funcione en versiones anteriores de IE.
Siento que vi una forma, usando la propiedad de contenido CSS, para insertar una etiqueta de salto de línea antes de un elemento. Obviamente esto no funciona:
#restart:before { content: ''<br/>''; }
¿Pero cómo haces esto?
El siguiente CSS funcionó para mí:
/* newline before element */
#myelementId:before{
content:"/a";
white-space: pre;
}
En lugar de agregar manualmente un salto de línea de alguna manera, puede implementar border-bottom: 1px solid #ff0000 que tomará el borde del elemento y solo border-<side> del lado que especifique.
Es posible utilizar la secuencia de escape /A en el contenido generado por elemento psuedo. Lea más en la especificación CSS2.
#restart:before { content: ''/A''; }
Es posible que también necesite agregar white-space:pre; para #restart
nota: /A denota el final de una línea.
ps Otro tratamiento para ser
:before { content: '' ''; display: block; }
Esto funciona para mí:
#restart:before {
content: '' '';
clear: right;
display: block;
}
Hay dos razones por las que no puede agregar contenido generado a través de CSS de la manera que desee:
el contenido generado acepta contenido y no marca. El marcado no se evaluará, solo se mostrará.
:beforey:aftercontenido generado se agregue dentro del elemento, por lo que incluso agregar un espacio o letra y definirlo comoblockno funcionará.
Hay un pseudo elemento ::outside que puede hacer lo que quieras. Sin embargo, parece que no hay soporte de navegador. (Lea más aquí: http://www.w3.org/TR/css3-content/#wrapping )
La mejor apuesta es usar un poco de jQuery aquí:
$(''<br />'').insertBefore(''#restart'');
No tuve suerte con la inserción de un descanso con: antes. Mi solución fue agregar un lapso con una clase y poner el descanso dentro del lapso. Luego cambie la clase para mostrar: ninguno; o mostrar: bloquear según sea necesario.
HTML
<div>
<span class="ItmQty"><br /></span>
<span class="otherclass">
<asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">
</asp:Label>
</span>
<div class="cartqty">
<asp:TextBox ID="QuantityTextBox" runat="server" Text=''<%# Bind("Quantity","{0:#}") %>'' Width="50"></asp:TextBox>
</div>
</div>
CSS
@media only screen and (min-width: 854px)
{
.ProjItmQty
{
display: block;
clear: both;
}
}
@media only screen and (min-width: 1003px)
{
.ProjItmQty
{
display: none;
}
}
Espero que esto ayude.
Pruebe lo siguiente:
#restart::before {
content: '''';
display: block;
}
Puede completar su documento con las etiquetas <br> y activarlas / off con CSS como cualquier otra:
<style>
.hideBreaks {
display:none;
}
</style>
<html>
just a text line<br class=''hideBreaks''> for demonstration
</html>
Sí, totalmente factible, pero definitivamente es un truco total (la gente puede darte mala cara por escribir ese código).
Aquí está el HTML:
<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>
Aquí está el CSS:
#restart:before { content: ''hiddentext''; font-size:0; display:block; line-height:0; }
Aquí está el violín: http://jsfiddle.net/AprNY/
Si #restart es un elemento en línea (por ejemplo, <span> , <em> etc.), puede convertirlo en un elemento de bloque usando:
#restart { display: block; }
Esto tendrá el efecto de garantizar un salto de línea tanto antes como después del elemento.
No hay una forma de que CSS inserte algo que actúe como un salto de línea solo antes de un elemento y no después. Tal vez podría causar un salto de línea antes como un efecto secundario de otros cambios, por ejemplo float: left , o clear: left después de un elemento flotante, o incluso algo loco como #restart:before { content: ''a load of non-breaking spaces''; } #restart:before { content: ''a load of non-breaking spaces''; } pero esto probablemente no sea una buena idea en el caso general.
Simplemente coloque un carácter de línea nueva unicode dentro del pseudo elemento anterior:
#restart:before { content: ''/00000A''; }
También puede usar la entidad HTML precodificada para un salto de línea en su contenido y tendrá el mismo efecto.
suponiendo que quiere que la altura de la línea sea de 20 px
.restart:before {
content: ''First Line'';
padding-bottom:20px;
}
.restart:after {
content: ''Second-line'';
position:absolute;
top:40px;
}