html - 这可以用 CSS 实现吗?

标签 html css

<分区>

http://i.imgur.com/CQpv1Wm.jpg

文字后面的线条可以只用CSS实现吗?

最佳答案

是的。

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

body {
    background: #ccc;
}

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

JSFiddle

Source

关于html - 这可以用 CSS 实现吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16800950/

相关文章:

css - @keyframes 动画没有运行

css - 使用 bootstrap 绘制 2x2 网格

javascript - 在动态元素上设置背景图像

javascript - 在选择表单中选择不同的选项并显示不同的内容

javascript - css 动画和 jquery .load() 在移动设备上卡顿

html - 让 CSS 悬停样式只影响超链接

javascript - 为什么 gzip 后的 html 文件显示时没有 JS 和 CSS?

javascript - 当我们从下拉菜单中选择一个选项时动态添加输入类型

javascript - 滚动 div 代码

html - 2 列布局,内容宽度固定,背景宽度不限