我有这个例子JSFIDDLE包含一个圆圈,但我无法让它根据其内容做出响应,在上面的示例中,当内容很长时,它会溢出圆圈。
.cd-single-point {
margin:50px;
position: absolute;
border-radius: 50%;
}
.cd-single-point > a {
position: relative;
text-align:center;
padding:2px;
text-decoration: none;
z-index: 2;
display: block;
width: 20px;
height: 20px;
border-radius: inherit;
background: #d95353;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-single-point::after {
/* this is used to create the pulse animation */
content: '';
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: inherit;
background-color: transparent;
-webkit-animation: cd-pulse 2s infinite;
-moz-animation: cd-pulse 2s infinite;
animation: cd-pulse 2s infinite;
}
如何仅使用 css 实现此目的?
最佳答案
您可以使用 padding technique在伪元素上保持圆的纵横比并根据其内容使其响应:
HTML :
<div class="wrap">
<div class="in">+46546546</div>
</div>
CSS:
.wrap{
color: #fff;
position:relative;
display:inline-block;
}
.in{
padding:60% 10%;
margin-top:-0.6em;
}
.in:after{
content:'';
position:absolute;
top:0; left:0;
width:120%;
padding-bottom:120%;
background-color:#D95353;
border-radius:50%;
z-index:-1;
}
关于css - 基于内容的响应圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25293482/