Question

我有一个CSS圈子出现在div之后使用：after伪类。我需要在该圈内插入一个箭头just like this。我的问题是在圈内放置任何东西。由于我已经使用过：创建圆圈后，如何在其中添加其他内容？

我需要圆圈是纯CSS，但箭头可以是图像。

<div id="callus-phone">
    <div class="tagline">Call us today!</div>
    <div class="phone-number">1 (800) 555-5555</div>
</div>

#callus-phone {
    color: white;
    background: black;
    padding: 25px 0px;
    text-align: center;
}

.phone-number {
    padding-bottom: 10px;
}

#callus-phone:after {
  background: red;
  border-radius: 50px;
  content: "";
  display: block;
  height: 50px;
  margin: auto;
  width: 50px;
}

Answer 1

只使用带有Font Awesome的CSS就可以获得相同的结果。它不会使用：在你指的是，但是再次，它的纯CSS，如果你不想包含字体真棒库，你可以研究他们的CSS并看看他们是如何做到的，并从那里开始实现你自己的图标：在

之后

在我的例子中，我添加了一堆定位和字体大小来尝试将箭头置于我的最佳能力中，但如果你愿意，你可以忽略它。

我希望这有用。

    #callus-phone {
        color: white;
        background: black;
        padding: 25px 0px;
        text-align: center;
    }

    .phone-number {
        padding-bottom: 10px;
    }

    .fa-circle {
        color: red;
    }

    .fa-caret-right {
        color: white;
        left: 2px !important;
        top: -2px !important;
        position: relative;
        font-size: 40px !important;
    }

    .fa-stack {
        font-size: 30px;
    }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

<div id="callus-phone">
    <div class="tagline">Call us today!</div>
    <div class="phone-number">1 (800) 555-5555</div>
    <span class="fa-stack fa-2x">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-caret-right fa-stack-1x fa-inverse"></i>
    </span>
</div>

在看到Vitorino Fernandes的回答之后，我想告诉你，如果你需要坚持使用：after，但如果你想要一个更加漂亮的角色而不是一个丑陋的角色，你可以使用下面的代码。您不需要对Font Awesome CSS库的引用，但您需要在自己的CSS中包含对其图标的引用。（或者您可以在HTML中包含他们的CSS链接标记，忘记我在CSS中添加的@ font-face。）

#callus-phone {
        color: white;
        background: black;
        padding: 25px 0px;
        text-align: center;
    }

    .phone-number {
        padding-bottom: 10px;
    }


#callus-phone:after {
  background: red;
  border-radius: 50px;
  content: " \f095";
  display: block;
  height: 50px;
  margin: auto;
  width: 50px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size:45px;
  text-rendering: auto;
  
}


@font-face {
  font-family: 'FontAwesome';
  src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.eot?v=4.2.0');
  src: url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
  
}

<div id="callus-phone">
    <div class="tagline">Call us today!</div>
    <div class="phone-number">1 (800) 555-5555</div>
</div>

Answer 2

您可以在\25B6

中使用Unicode字符content

＆＃13;

#callus-phone {
  color: white;
  background: black;
  padding: 25px 0px;
  text-align: center;
}
.phone-number {
  padding-bottom: 10px;
}
#callus-phone:after {
  background: red;
  border-radius: 50px;
  content: "\25B6";
  display: block;
  line-height: 50px;
  height: 50px;
  margin: auto;
  width: 50px;
  font-size: 22px
}

＆＃13;

<div id="callus-phone">
  <div class="tagline">Call us today!</div>
  <div class="phone-number">1 (800) 555-5555</div>
</div>

＆＃13;

我有一个带有伪的div：after元素后面创建一个圆圈。如何在该圈子中添加其他内容？

2 个答案: