问题：
一个css样式的实现?
张宣
红框内的效果应该怎么实现? 文字两边中间的线条
共有3个答案
丁俊爽
一个:after或者:before + 定位就可以搞定了，也可以参考一下这样的布局（>_<虽然已被采纳）：
.endBox{ display: flex; justify-content: center; width:100%; padding:20px; box-sizing: border-box; position: relative; }.endBox p{ width:100% text-align: center; padding:0 20px; background:#fff; z-index: 2;}.endBox:after{ content: ""; position: absolute; top:50%; left:0; width:100%; border:1px solid #ccc; z-index: 1}
舒浩邈
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>demo</title> <style> .text-box { height: 60px; display: flex; justify-content: center; align-items: center; position: relative; } .line { height: 2px; width: 100%; background-color: #dedede; position: absolute; } .text { background-color: #fff; padding: 4px 14px; display: inline-flex; letter-spacing: 2px; z-index: 2; } </style></head><body> <div class="text-box"> <div class="line"></div> <div class="text">连接商业与科技 培养知行合一的经营人才</div> </div></body></html>
陈瀚玥
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { margin: 0; padding: 0; } .text { display: flex; align-items: center; justify-content: center; } .text::before { content: ""; flex: 1; background-color: red; height: 1px; margin-right: 10px; } .text::after { content: ""; flex: 1; background-color: red; height: 1px; margin-left: 10px; } </style> </head> <body> <div class="text">一段文字</div> </body></html>
类似资料：
-
上图红框中的效果有没有什么方法能够用实现?
-
https://elements.envato.com/sign-in 当你查看这个CSS的时候，<style data-styled="active" data-styled-version="6.1.12"></style> 里面是什么页面，这怎么实现是，哪里能找到这个CSS文件
-
每三行数据一个背景色 要求纯css实现 因为要打包成app app中无法使用window.去操作
-
https://www.stgeorges.edu.ar/quilmes/history 这种排版是怎么实现的? 如下三张图, 为什么文字和div覆盖区域会重叠?
-
例如：
-
Epoch 图表使用 css 设置填充颜色、笔画等。默认情况下，图表使用 D3分类颜色。您可以轻松地覆盖这些默认颜色或创建您自己的自定义类别。 主题 Epoch 以主题的形式安排类似于图表的样式。主题可以通过特殊的类名添加到任何HTML容器中。目前，Epoch船有两个内置主题： epoch-theme-default-基于d3分类颜色的默认主题 epoch-theme-dark-黑色背景下使用的主