dt에 CSS를 통해 텍스트 추가

Question

매우 밀도가 높은 dl 레이아웃을 만들고 싶습니다. dt는 그 뒤에 오는 dd와 같은 줄에 있습니다. 따라서 dd와 dd를 분리하려면 몇 가지 추가 강조가 필요합니다. 전통적인 서면 문서에서 이것은 mdash 또는 콜론을 통해 수행됩니다.

CSS로 지정할 수 있습니까, 아니면 내가 선택한 스타일에 따라 데이터를 다시 써야합니까?

(헤더와 비슷한 문제가 있습니다. 헤더가 단락이 시작되는 동일한 줄에 텍스트를 굵게 표시하여 만 구현되는 경우 헤더 텍스트 뒤에 마침표를 삽입해야합니다. 이에 대한 별도의 명령이 라텍스하지만, CSS는 그렇게 할 수 있다면 다시 궁금)이 너무 여기에 해당하는 경우

(나는 this question의 인식 만 확실하지 오전)

편집 :.. 내가 실현 콜론에 대해서는 다음과 같이 작동하지만, 대들에는 작동하지 않음

.myclass dt:after { content: ":"} 

Answer 1

fiddle이 어떤 방식 으로든 도움이됩니까? 그것은 순수하게 CSS에서하는 것은 내 지식 (IE7, 아마도 IE8)에 대한 일부 브라우저를 무시할 것입니다. 내가 제대로 이해하면

Answer 2

는 다음 링크 된 질문은 완벽하게 당신의 질문에 대한 답 : 헤더에 대한

dt:after { 
    content:': '; /* or content:' – '; 
} 

:

이

h1, h2, h3, h4, h5, h6 { 
    font-weight:bold; 
    display:inline; 
} 
h1:after, h2:after, h3:after, h4:after, h5:after, h6:after { 
    content:'. '; 
} 

Answer 3

당신은 같은 전각 대시 문자를 입력하여이 작업을 수행 할 수 있습니다 제공 문자 인코딩을 허용하고 입력 방법을 알고 있어야합니다. 예 : windows-1252 또는 utf-8. 그렇다면 인코딩을 올바르게 선언해야합니다. http://www.w3.org/International/tutorials/tutorial-char-enc/

인코딩 문제를 방지하고 Ascii 문자 만 사용하여 문서를 작성할 수 있으려면 CSS에서 "백 슬래시 이스케이프"를 사용할 수 있습니다. . "\2014 "는이 이상한 백 슬래시 이스케이프가 뒤에 공백을 소비하는 규칙에 의해 발생합니다 : "-"당신은 텍스트를 원한다면

dt:after { content: "\2014"; } 

은 (즉, 전각 대시과 공간을 두 개의 공백을 입력해야합니다)

CSS 규칙에 따라 —에는 단지 7 개의 데이터 문자 만 있습니다. HTML 문서의 style 요소 안에 있더라도 이전 HTML 규칙에 따라 내용이 변경되지 않습니다. HTML 구문 분석시 style 요소는 마크 업이 인식되지 않는 일반 텍스트로 처리되며 모든 문자는 그대로 사용됩니다. 물론 CSS 인식을 통과해야하는 것을 제외하고는 인식 할 필요가있는 종료 태그 </style>을 제외하고는. 원칙적으로

는 XHTML이를 변경하고 정품 XHTML (서버 XHTML은 콘텐츠 형식을 사용)에서 지원하는 브라우저 (예를 들어, 하지 IE 8),이 (A style 요소에 content: "—"을 사용할 수 있습니다 인해의 내용 그 요소는 파싱되어 엔티티 참조가 인식됩니다.) 위에서 설명한 대안이 있기 때문에 이것은 좋은 생각이 아닙니다.

마지막으로 Ascii 하이픈 - 빼기 "-"를 대시 대신 사용할 수 있지만 구두점으로 사용하지 말고 단어 내 용으로 짧고 고르지 못한 대체 단어입니다.