- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一些文本标题,这些标题的一侧有一条线,该线基于文本的宽度是动态的。
例子:
我猜我需要在标题上做一些背景颜色(例如白色)来伪造它,然后使用 :before
伪类,但到目前为止我还没有成功。
HTML(至少目前)只是一个基本的标题标签:
<h3>This is some text</h3>
如果可能的话,我真的很想避免添加额外的 HTML 元素。
最佳答案
我遇到了 this website有几个很好的例子。有一个使用 before
的示例伪类,但它确实有一个额外的 <span>
元素。尽管如此,这是一个很好的起点。这个可能对你有用(但是它确实包含一个额外的元素):
CSS:
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body { font-family: "Helvetica", sans-serif; text-align: center; background: transparent; padding: 10px 40px;}
p {
text-align: left;
margin-bottom: 30px;
line-height: 20px;
}
h1 {
text-align:left;
position: relative;
margin-top: 10px;
margin-left: 0;
}
h1.two span {
background: #fff;
padding: 0 10px;
position: relative;
z-index: 10;
}
h1.two+p {
border-top: solid 1px black;
padding-top: 40px;
margin-top: -40px;
}
</style>
正文:
<body>
<h1 class="two"><span>Heading Number Two</span></h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</body>
似乎在 Safari 中工作。请检查链接,还有更多示例。
关于html - 创建具有基于文本的动态宽度的边框/线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8401976/
我正在尝试创建一些文本标题,这些标题的一侧有一条线,该线基于文本的宽度是动态的。 例子: 我猜我需要在标题上做一些背景颜色(例如白色)来伪造它,然后使用 :before伪类,但到目前为止我还没有成功。
如何在 Qt 中使用 QVector 初始化多边形来创建一个开放多边形? QPolygonF 将始终关闭多边形并将最后一个点与第一个点连接起来。 谢谢你的帮助 [编辑] 在QGraphicsScene
如何获取数组中道路的几何形状(线条/绘图)? 可能吗? 谢谢! [抱歉我的英语不好] 最佳答案 目前 Google map 无法实现此操作。开源网络服务,如 OpenStreetMap能够返回数据库中
当我绘制具有透明纹理的平面(例如房屋的 window )时,我看到了不应该出现的线条或三角形。我该如何解决这个问题? (来源:troll.ws) 这是我用来绘制一个窗口的方法。我暂时启用混合以使窗口透
在 WPF 中,有没有一种方法可以修改从 Dash-Dot 序列绘制任何路径的方式?假设我想为我正在绘制的任何路径或绘图路径本身上的小三角形、波浪等绘制一条三重线。我已经尝试过画笔,但它不会遵循路径。
I have created an interactive map that when areas are selected then the related content should show/
我想在圆圈悬停时显示上下文菜单,以向用户显示一些选择,并在单击时执行一些操作,但我无法做到这一点。 如何在鼠标悬停事件上显示带有拉斐尔元素(例如圆圈、线条)的上下文菜单,并在选择特定菜单项时执行某些操
已解决。 我之前有一个问题,但它发布得非常糟糕,所以根据更好的规则,这里再次出现。 我想创建某种样式的图表,例如此图像: 。 它基于物理定律,Snell's Law 。到目前为止,我已经成功地使用基本
我正在绘制一些具有相同笔划的路径,但有一些明显的重叠(动态创建和更新树)。在重叠区域,笔划看起来与非重叠区域(- 参见 b)不同(更暗和更粗 - 参见 a)。同样的效果对于不同的笔触颜色也很明显。 代
我正在使用 python 和 opencv。我的目标是检测用树莓派相机拍摄的图像中的“X”形碎片。该项目是我们有预印的井字棋板,并且每次在板上放置新棋子(带有印章)时都必须对板进行成像。然后输出说明棋
设置图像样式有两种方法,一种是全局修改,一种只针对一幅图片有效。 全局修改 a<-c(1:10)#全局修改old_par<-par(no.readonly=TRUE)
Matplotlib 是 Python 的绘图库。 它可与 NumPy 一起使用,提供了一种有效的 MatLab 开源替代方案。 它也可以和图形工具包一起使用,如 PyQt 和 wxPython。
我创建了一个脚本来读取和绘制 .txt 文件及其内容(数字/值)。每个 .txt 文件位于不同的文件夹中。每个文件夹依次代表数据的一个主题。 这段代码工作正常。 Python 读取每个单独的 .txt
对于提交的最终文章,我被要求更新我的数据,以便它们符合以下规范: 轴线为 0.25 毫米 轴线周围,刻度线朝内 数据线为 0.5 毫米 字体为10pt 人物宽度应为 80 或 169 毫米 必须为 3
当尝试使用 D3DPT_LINELIST 在 3D 空间中绘制一条线时,Direct3D 给我一个关于无效顶点声明的错误,说它不能转换为 FVF .我使用的顶点声明和着色器/流设置与我的 D3DPT_
我如何使用 CSS 为 SVG“线”元素创建绘制动画。我想在滚动上画线,效果流畅。有人有什么想法吗?我试着搜索这个,但我找不到线元素的这种效果。这是我的 html 和 svg:
有什么方法可以用 CSS 来设置 SVG 行的样式吗?我试过添加。我想稍后用 JQuery 添加类 onclick。这将添加 class,然后更改描边颜色。 .black { fill: blac
我创建了一个受“站点地图”启发的菜单,它使用 svgs 连接菜单中的每个元素。目前 svg 是静态的。但是我相信有可能使这些吸引进来? 我有一个更复杂的问题,我只希望在容器 ul 可见时绘制线条。 当
这个问题在这里已经有了答案: How to draw a path smoothly from start point to end point in D3.js (1 个回答) 关闭 6 年前。
我在代码中的 HTML5 Canvas 元素上绘制了许多 1px 线。绘图代码大致如下所示,本例中的 transform 变量使用 d3-zoom 设置。 instructions.f32 是一个 F
我是一名优秀的程序员,十分优秀!