단어 중간에 가로줄을위한 CSS 기술 같습니다. ———————————– 내

중간에 텍스트가있는 수평 규칙을 만들려고합니다. 예를 들면 다음과 같습니다.

———————————– 내 제목은 여기 ———— —————–

CSS에서 그렇게하는 방법이 있습니까? 모든 “-“없이 분명히 대시.

답변

이것은 대략 내가하는 일입니다. 선 border-bottom에 포함 h2을 설정 한 다음 h2더 작게 line-height만듭니다. 그런 다음 텍스트가 span불투명 한 배경 으로 중첩 됩니다.

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>
스 니펫 확장

Chrome에서만 테스트했지만 다른 브라우저에서 작동하지 않을 이유는 없습니다.

JSFiddle : http://jsfiddle.net/7jGHS/

답변

다른 솔루션을 시도한 후 다른 텍스트 너비, 가능한 배경 및 추가 태그를 추가하지 않고 유효한 것을 제공했습니다. 

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}
<h1>Heading</h1>
<h1>This is a longer heading</h1>
스 니펫 확장

IE8, IE9, Firefox 및 Chrome에서 테스트했습니다. 여기서 확인할 수 있습니다 http://jsfiddle.net/Puigcerber/vLwDf/1/

답변

좋아, 이것은 더 복잡하지만 IE <8 이외의 모든 것에서 작동합니다.

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;
   left: auto;
}

: before 및 : after 요소는 절대적으로 배치되므로 하나는 왼쪽으로, 하나는 오른쪽으로 당길 수 있습니다. 또한 너비 (이 경우 40 %)는 텍스트 내부의 너비에 매우 의존합니다. 그에 대한 해결책에 대해 생각해야합니다. 최소한 top: 1.2em글꼴 크기가 다른 경우에도 줄이 텍스트 중앙에 어느 정도 유지됩니다.

그래도 잘 작동하는 것 같습니다 : http://jsfiddle.net/tUGrf/3/

답변

가장 짧고 가장 좋은 방법 :

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}
<span> your text </span>
스 니펫 확장

답변

Flex 기반 솔루션은 다음과 같습니다.

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}
<h1>Today</h1>
스 니펫 확장

JSFiddle : https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

답변

나중에 (현재) 브라우저 및 display:flexandd를 pseudo-elements 사용하면 쉽게 그릴 수 있습니다. border-style, box-shadow심지어 background화장 너무 도움이됩니다.

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h1>side lines via flex</h1>
스 니펫 확장

답변

.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: rgba(0, 0, 0, 0.35);
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}
<div class="hr-sect">Text</div>
스 니펫 확장