如何解决CSS插入框阴影与偏移量?
我想要的结果是标题元素的下划线较粗,类似于左侧:
我正在使用下划线来处理内置CSS框阴影,但是我不知道如何从左侧偏移它,以使其与h2文本的开头不完全内联。
html {
font-family: 'Roboto',sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
}
h2 span {
Box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
很高兴知道如何实现这一目标。
解决方法
您可以使用伪元素::after
或::before
,并使用向左或向右控制偏移/位置。代码在注释中说明。
html {
font-family: 'Roboto',sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
width: max-content; /* Take the content width */
}
h2 span::after {
content: " "; /* Let us 'activate' the pseudo element */
display: block;
background: #88DEB2;
height: 15px;
position: relative;
top: -10px;
left: 5px; /* Control the misalignment */
z-index: -1; /* So that it appears underneath */
}
<h2><span>Incredible Pure Castile Soap</span></h2>
,
您几乎不错,只需添加一个负数text-indent
:
html {
font-family: 'Roboto',sans-serif;
font-size: 62.5%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
padding-left: 1rem;
}
h2 span {
box-shadow: inset 0 -1.0rem 0 0 #88DEB2;
display:inline-block; /* this is needed for the trick */
text-indent: -1rem; /* here */
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
具有梯度的多线解决方案
html {
font-family: 'Roboto',sans-serif;
font-size: 62.5%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
padding-left: 1rem;
}
h2 span {
background:
linear-gradient(#88DEB2,#88DEB2)
bottom right/calc(100% - 1rem) 1rem
no-repeat;
padding-right: 1rem;
}
<h2><span>Incredible Pure Castile Soap</span></h2>
,
您可以使用linear-gradient
来伪造一个可以实现此目的的下划线(有关详细信息,请参见代码中的注释)
html {
font-family: 'Roboto',sans-serif;
font-size: 62.5%;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
}
body {
word-wrap: break-word;
overflow-x: hidden;
}
h2 {
font-family: serif;
font-weight: bold;
font-size: 2rem;
line-height: 1.1;
}
h2 span {
background-image: linear-gradient(transparent 50%,#88DEB2 50%); /* makes a linear gradient */
background-position: 5px 0; /* offsets it */
background-repeat: no-repeat; /* stops it from repeating */
padding-right: 5px; /* gives more space for the underline offset */
}
<h2><span>Incredible Pure Castile Soap</span></h2>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。