宽度和高度似乎不适用于:before伪元素之前 [英] width and height doesn't seem to work on :before pseudo-element

问题描述

这里是一个小提琴.

<p>foo <a class="infolink" href="#">bar</a> baz</p>

和

a.infolink::before
{
    content: '?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
}

?"出现，但显然没有20ex大小.为什么不?在Firefox和Chrome中进行了测试.

The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome.

推荐答案

注意:::before和::after

Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.

将宽度&的显示值更改为inline-block.高度，同时保持内联格式上下文.

Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.

a.infolink::before {
    content: '?';
    display: inline-block;
    background: blue;
    color: white;
    width: 20px;
    height: 20px;
}

http://jsfiddle.net/C7rSa/3/

这篇关于宽度和高度似乎不适用于:before伪元素之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！