Here是一把小提琴.

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

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

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

推荐答案

注:::before::after pseudo-elements在默认情况下实际上是display: inline;.

将宽度和高度的显示值更改为inline-block,以便在保持内联格式上下文的同时生效.

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

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

Css相关问答推荐

要创建其按钮垂直对齐而不是水平对齐的v-bTN-toggle

如何将 div 和 img 包装在 display:flex 容器中

如何减少弹性项目之间的差距

带有 flex 的 CSS 空 div 以扩展并保持纵横比

如何为 React Native switch 组件创建标签?

如何在 TypeScript 文件中导入 CSS 模块?

如何在 flex-wrap 中优先考虑第一行?

Tailwind:如何设置网格的自动填充?

预期失败时使用toHaveStyle进行测试

弹性盒项目之间的间距

为什么无论我做什么都不能改变复选框的 colored颜色 ?

我应该使用 CSS :disabled 伪类还是 [disabled] 属性 Select 器,还是见仁见智?

纯 CSS 滚动动画

CSS - 在 id 中 Select 类的语法

如何在需要时通过 HTTPS 包含 CSS 和 JS 文件?

Angular 动画的目的是什么?

Select 标签的占位符

可变高度的 CSS 浮动 div

将 Fixed div 设置为父容器的 100% 宽度

仅使用 CSS 交换 DIV 位置