伪类 ::before - 创建 css 圆

Posted 2023-03-06

【中文标题】伪类 ::before - 创建 css 圆

【英文标题】：Pseudo class ::before - create css circle

【发布时间】：2015-04-30 15:54:23

【问题描述】：

我正在尝试用 css 创建圆圈，但不想使用伪类 ::before

应该是这样的（地铁站列表）：

.subway-item
 // css for text item going after circle
 
.subway-item::before
   width:15px;
   border-radius: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   background-color:#69b6d5;

我知道可以在文本或图像之前使用附加元素来完成。但想知道是否可以在 ::before 中使用此类属性

【问题讨论】：

您似乎忘记指定 content 属性。如果未指定，则不会生成伪元素。默认情况下，该元素也是inline，这意味着如果要在其上设置尺寸，则需要将display 设置为inline-block。看起来您还需要指定height。

jsfiddle.net/cpgrscae/1 在这里创建，也许你能帮上忙，这个应该还有不同颜色的附加样式

查看这个更新的例子 - jsfiddle.net/rL5g0wxh

谢谢大家，现在我明白内联块应该在 ::before 块中！太好了！

【参考方案1】：

您还需要设置content、height 和display 使其真正呈现伪元素。

例子：

    .subway-item::before
       content: '';
       display: inline-block;
       width: 15px;
       height: 15px;
       -moz-border-radius: 7.5px;
       -webkit-border-radius: 7.5px;
       border-radius: 7.5px;
       background-color: #69b6d5;
    

<div class="subway-item"></div>

注意：最好在标准属性之前编写供应商特定属性（在您的情况下为border-radius）。

【讨论】：

@AlexVeryutin 现在应该了，我已经在几分钟前看到你的小提琴时将block 更改为inline-block。

将border-radius设置为宽度（或高度）的一半会更合乎逻辑。

我知道这个已经很老了 - 但没有 0.5 像素 @aaronk6 :) 使用 em 代替浮点数。

@webprogrammer 实际上有，因为这些是显示像素，而不是设备像素。使用浮动数字非常好，当您在高分辨率显示器上（或只是放大）时，它会产生明显的效果。

创建圈子也可以使用border-radius: 50%