Question

我想在我的页面中间放一个圆圈，前后有一行。

我做过类似的事情，但我不知道为什么圆圈和右线之间有空格。圆与左线之间没有空格，有人知道为什么吗？

<p class="circle">●</p>

.circle{
  font-size: 50px;
  color: #4D9EBD;
  margin-top: -30px;
  margin-bottom: -10px;
}

.circle:before{
  content: '---------';
  letter-spacing: -10px;
  color: grey;

}
.circle:after{
  content: '---------';
  letter-spacing: -10px;
  color: grey;
}

Answer 1

我认为您的问题是由字母间距引起的，这会使您的前后内容超出范围。我经常使用flex解决方案来处理这些事情。 https://jsfiddle.net/0zoyodzj/

.circle {
  align-items: center;
  display: flex;
  color: #4D9EBD;
  font-size: 50px;
}

.circle:before,
.circle:after {
  content: '';
  background-color: grey;
  height: 3px;
  width: 4rem;
}

Answer 2

你只需要添加属性margin-left。您可以使用以下代码编辑CSS块：

.circle:after {
    content: '---------';
    letter-spacing: -10px;
    color: grey;
    margin-left: -7px;
}

Answer 3

<p class="circle">●</p>

.circle{
  font-size: 50px;
  color: #4D9EBD;
  margin-top: -30px;
  margin-bottom: -10px;
  margin-right: 10px;

}

.circle:before{
  content: '---------';
  letter-spacing: -10px;
  color: grey;

}
.circle:after{
  content: '---------';
  letter-spacing: -10px;
  color: grey;
  margin-left: -10px;
}

使用.circle:after中的margin-left或margin-right: 10px;

中的.circle

圆和左线之间没有空格

3 个答案: