如何在CSS中的文本之前添加破折号

Question

我正在尝试在文字之前添加短划线。见图。如何在文本前完成破折号，使其看起来像图像？

我有以下html

<div class="mrvl-ex-grid">
<article class="sample">
    <img src="/images/examples/PN9Xg.jpg" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

这是CSS的jsfiddle：

https://jsfiddle.net/weina67/0vozsjsb/

我让悬停菜单和预览按钮工作（但不是中间的短划线。如何在预览按钮和标签之间的中间添加短划线？参见附件图片

当人们将鼠标悬停在图像上时，会显示悬停菜单以及标签和预览按钮。此外，我必须使仪表板响应（在1024px，1280px，1440px上看起来不错）。它必须显示在预览按钮和标签的中间。

请注意，在小提琴中，您必须将鼠标悬停在图像上才能看到标签以及我想要添加短划线的位置。

Answer 1

使用：before伪选择器，您可以在任何需要之前创建一个简单元素。

示例代码：

article.sample:before {
  content: "";
  display: block;
  border: 1px solid grey;
  width: 75%;
  margin: 20px auto;
}

这会在您的样本之前创建75％宽度的破折号。

＆＃13;

＆＃13;

 .mrvl-ex-grid {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  min-width: 1024px;
}

.mrvl-ex-grid .sample {
  margin: 0;
  margin-right: 7px;
  position: relative;
}

article.sample:before {
  content: "";
  display: block;
  border: 1px solid grey;
  width: 75%;
  margin: 20px auto;
}

.mrvl-ex-grid .sample:last-child {
  margin-right: 0;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(6, 158, 173, 0.85);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  transition: 0.2s;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-preview-btn {
  background-image: url(../images/icon-glass-lt.svg);
  background-repeat: no-repeat;
  background-position: center 25%;
  background-size: 50px auto;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-label {
  position: absolute;
  bottom: 22%;
  width: 100%;
  left: 0;
  font-weight: bold;
  font-size: 1.3em;
}

.mrvl-ex-grid .sample:hover .mrvl-ex-item-hover-menu {
  opacity: 1.0;
}

.mrvl-ex-grid .sample:hover img {
  filter: blur(4px);
}

.mrvl-ex-grid .sample img {
  width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  border-radius: 5px;
}

＆＃13;

<div class="mrvl-ex-grid">
<article class="sample">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=200&h=200" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

＆＃13;

＆＃13;

＆＃13;

点击此处查看小提琴：https://jsfiddle.net/0vozsjsb/2/

Answer 2

如果你想要一个ACTUAL破折号，你可以尝试这样的事情：

.mrvl-ex-grid .sample:after {
    display : block;
    text-align : center;
    font-size : 4em;
    margin : 20px auto;
    color: #fff;
    content: "—";
}

对于演示，这里是a Fiddle！

Answer 3

为什么不添加一个白色背景的div？

演示：

＆＃13;

＆＃13;

body {
    background-color: rgba(6,158,173,0.85);
}

.longdash {
    padding : .2em 0 0 0;
    width : 5em;
    margin : 50px;
    background-color: #fff;
}

＆＃13;

<div class="longdash"></div>

＆＃13;

＆＃13;

＆＃13;

另见this Fiddle！

注意：

如果您不想要空元素，也可以使用:before或:after伪元素。

演示：

＆＃13;

＆＃13;

body {
    background-color: rgba(6,158,173,0.85);
}

.mrvl-ex-grid {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  min-width: 1024px;
}

.mrvl-ex-grid .sample {
  margin: 0;
  margin-right: 7px;
  position: relative;
}

.mrvl-ex-grid .sample:last-child {
  margin-right: 0;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(6, 158, 173, 0.85);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  transition: 0.2s;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-preview-btn {
  background-image: url(../images/icon-glass-lt.svg);
  background-repeat: no-repeat;
  background-position: center 25%;
  background-size: 50px auto;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-label {
  position: absolute;
  bottom: 22%;
  width: 100%;
  left: 0;
  font-weight: bold;
  font-size: 1.3em;
}

.mrvl-ex-grid .sample:hover .mrvl-ex-item-hover-menu {
  opacity: 1.0;
}

.mrvl-ex-grid .sample:hover img {
  filter: blur(4px);
}

.mrvl-ex-grid .sample img {
  width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  border-radius: 5px;
}

.mrvl-ex-grid .sample:after {
    display : block;
    width: 5em;
    height : .1em;
    margin : 50px auto;
    background-color: #fff;
    content: "";
}

＆＃13;

<div class="mrvl-ex-grid">
<article class="sample">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=200&h=200" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

＆＃13;

＆＃13;

＆＃13;

另见this Fiddle！

Answer 4

为什么不简单地用背景模仿呢？

.mrvl-ex-item-label {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="1" viewBox="0 0 50 1"><rect x="0" y="0" width="50" height="1" fill="white" /></svg>') no-repeat 50% 0;
    padding-top: 50px;
}

我在这里使用SVG是因为它更容易推理（尽管可以使用background-size拉伸单个白色像素图像，并且可能会在base-64中获得更少的字节。

＆＃13;

＆＃13;

.mrvl-ex-grid {
  position: relative;
  display: flex;
  box-sizing: border-box;
  padding: 0;
  width: 100%;
  min-width: 1024px;
}

.mrvl-ex-grid .sample {
  margin: 0;
  margin-right: 7px;
  position: relative;
}

.mrvl-ex-grid .sample:last-child {
  margin-right: 0;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(6, 158, 173, 0.85);
  border-radius: 5px;
  color: #fff;
  text-align: center;
  transition: 0.2s;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-preview-btn {
  background-image: url(../images/icon-glass-lt.svg);
  background-repeat: no-repeat;
  background-position: center 25%;
  background-size: 50px auto;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.mrvl-ex-grid .sample .mrvl-ex-item-hover-menu .mrvl-ex-item-label {
  position: absolute;
  bottom: 22%;
  width: 100%;
  left: 0;
  font-weight: bold;
  font-size: 1.3em;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="1" viewBox="0 0 50 1"><rect x="0" y="0" width="50" height="1" fill="white" /></svg>') no-repeat 50% 0;
  padding-top: 50px;
}

.mrvl-ex-grid .sample:hover .mrvl-ex-item-hover-menu {
  opacity: 1.0;
}

.mrvl-ex-grid .sample:hover img {
  filter: blur(4px);
}

.mrvl-ex-grid .sample img {
  width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  border-radius: 5px;
}

＆＃13;

<div class="mrvl-ex-grid">
<article class="sample">
    <img src="/images/examples/PN9Xg.jpg" alt="Lorem Sum"><div class="mrvl-ex-item-hover-menu">
    <div class="mrvl-ex-item-preview-btn"></div>
    <label class="mrvl-ex-item-label">Video</label>
</div>
</article>
</div>

＆＃13;

＆＃13;

＆＃13;

对于白线使用单像素base64字符串可能更好，因为它更容易和广泛支持，但我发现SVG方法很酷。下面将它作为单个像素base64数据字符串：

.mrvl-ex-item-label {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P8////fwAKAAP+j4hsjgAAAABJRU5ErkJggg==') no-repeat 50% 0;
    background-size: 100px 2px;
    padding-top: 50px;
}

优点是图像比SVG更易于使用及其不可预测的行为......

Answer 5

据我所知，标签不接受：在/之后/：伪元素之后。因此，我建议只在适当的位置（标签前）为您的标记添加<hr>，为其提供您想要的任何类名，然后应用以下样式：

.hr {
  width: 25%;
  height: 2px;
  position: absolute;
  top: calc(50% - 1px);
  left: 37.5%;
  border: 0; // overrides standard <hr> styling
  background-color: white;
}

您可以使用预处理器对此进行各种增强，但希望它能为您提供正确的想法。