Change
height using CSS

后端 未结 11 2045
别那么骄傲
别那么骄傲 2021-01-30 08:20

I have seen a question here about the same, but I can\'t get any of the answers to work (at least on Chrome).

This question is only for
, I know

11条回答
  •  情歌与酒
    2021-01-30 08:41

    Use the content property and style that content. Content behavior is then adjusted using pseudo elements. Pseudo elements ::before and ::after both work in Mac Safari 10.0.3.

    Here element br content is used as the element anchor for element br::after content. Element br is where br spacing can be styled. br::after is the place where br::after content can be displayed and styled. Looks pretty, but not a 2px
    .

    br { content: ""; display: block; margin: 1rem 0; }
    br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
    

    The br element line-height property is ignored. If negative values are applied to either or both selectors to give vertical 'lift' to br tags in display, then correct vertical spacing occurs, but display incrementally indents display content following each br tag. The indent is exactly equal to the amount that lift varies from actual typographic line-height. If you guess the right lift, there is no indent but a single pile-up line exactly equal to raw glyph height, jammed between previous and following lines.

    Further, a trailing br tag will cause the following html display tag to inherit the br:after content styling. Also, pseudo elements cause

    to be interpreted as a single
    . While pseudo-class br:active causes each
    to be interpreted separately. Finally, using br:active ignores pseudo element br:after and all br:active styling. So, all that's required is this:

    br:active { }
    

    which is no help for creating a 2px high
    display. And here the pseudo class :active is ignored!

    br:active { content: ""; display: block; margin: 1.25em 0; }
    br { content: ""; display: block; margin: 1rem; }
    br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; }
    

    This is a partial solution only. Pseudo class and pseudo element may provide solution, if tweaked. This may be part of CSS solution. (I only have Safari, try it in other browsers.)

    Learn web development: pseudo classes and pseudo elements

    Pay attention to global elements - BR at Mozilla.org

提交回复
热议问题