How to insert a line break before an element using CSS_问答_开发者

I feel like I saw a way, using the CSS content property, to insert a line break tag before an element. Obviously this doesn't work:

#res开发者_开发技巧tart:before { content: '<br/>'; }

But how do you do this?

It's possible using the \A escape sequence in the psuedo-element generated content. Read more in the CSS2 spec.

#restart:before { content: '\A'; }

You may also need to add white-space:pre; to #restart.

note: \A denotes the end of a line.

p.s. Another treatment to be

:before { content: ' '; display: block; }

If #restart is an inline element (eg <span>, <em> etc) then you can turn it into a block element using:

#restart { display: block; }

This will have the effect of ensuring a line break both before and after the element.

There is not a way to have CSS insert something that acts like a line break only before an element and not after. You could perhaps cause a line-break before as a side-effect of other changes, for example float: left, or clear: left after a floated element, or even something crazy like #restart:before { content: 'a load of non-breaking spaces'; } but this probably isn't a good idea in the general case.

This works for me:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

Following CSS worked for me:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

There are two reasons why you cannot add generated content via CSS in the way you want:

generated content accepts content and not markup. Markup will not be evaluated but displayed only.
:before and :after generated content is added within the element, so even adding a space or letter and defining it as block will not work.

There is an ::outside pseudo element that might do what you want. However, there appears to be no browser support. (Read more here: http://www.w3.org/TR/css3-content/#wrapping)

Best bet is use a bit of jQuery here:

$('<br />').insertBefore('#restart');

Example: http://jsfiddle.net/jasongennaro/sJGH9/1/

Just put a unicode newline character within the before pseudo element:

    #restart::before { content: '\00000A'; }

<p>
  The quick brown fox
  <span id="restart">jumps over the lazy dog</span>
</p>

Yes, totally doable but it is definitely a total hack (people may give you dirty looks for writing such code).

Here is the HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Here is the CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Here is the fiddle: http://jsfiddle.net/AprNY/

Try the following:

#restart::before {
  content: '';
  display: block;
}

You can populate your document with <br> tags and turn them on\off with css just like any others:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

assuming you want the line height to be 20 px

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

I had no luck at all with inserting a break with :before. My solution was to add a span with a class and put the break inside the span. Then change the class to display: none; or display: block as needed.

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;
    }
}

Hope this helps.

You can also use the pre-encoded HTML entity for a line break 
 in your content and it'll have the same effect.

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 The Content Proerty, "newlines"... p will not add margin nor padding at end of p inside parent block (e.g., body › section › p). "\A " line break forces line space, equivalent styled line-height.

Instead of manually adding a line break somehow, you can do implement border-bottom: 1px solid #ff0000 which will take the element's border and only render border-<side> of whichever side you specify.

Add a margin-top:20px; to #restart. Or whatever size gap you feel is appropriate. If it's an inline-element you'll have to add display:block or display:inline-block although I don't think inline-block works on older versions of IE.