선도 나는 CSS에서 다음과 같은 효과를 만들려고 해요

CSS에 점을 다음 만들기 :선도 나는 CSS에서 다음과 같은 효과를 만들려고 해요

<a class="read-more" href="#"><span>SEE MORE</span></a>

그리고 CSS에 대한 :

여기 enter image description here

내가 무슨 짓을

.read-more{ 
    display: inline-block; 
} 

.read-more span:before{ 
    content: '...'; 
    width: 20px; 
} 
.read-more span:after{ 
    content: '..................'; 
    width: 60px; 
}

그러나; 표시되는 도트는 링크의베이스와 일치합니다. 누구든지 더 나은 솔루션을 제공하거나 점을 가져 와서 링크 중간에 맞출 수 있습니까?

출처

2013-07-15 farjam

는 스팬 요소는 정말 필요한가? 당신은 그것없이이 모양을 달성 할 수 있어야합니다. – cimmanon

사용 \ b (7) 개폐하는 대신는 middot의

.read-more{ 
    display: inline-block; 
} 

.read-more span:before{ 
    content: '\b7\b7\b7'; 
    width: 20px; 
} 
.read-more span:after{ 
    content: '\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7'; 
    width: 60px; 
}

출처

2013-07-15 20:42:44 Stefan

16 진수 문자 코드 대신 HTML 엔티티 & middot를 사용하는 것이 좋습니다. - 동일한 결과, 향상된 휴대 성. 어쨌든 당신의 대답이 그 질문에 가장 잘 어울리는 것처럼, 그러나 그 변화를 위해 더 좋을 것입니다. –

@AaronMiller CSS 'content'는 @과 같은 명명 된 엔티티 또는 일반 숫자 엔티티를 허용하지 않지만 ASCII 텍스트와 유니 코드를 렌더링합니다. http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content – Stefan

그것은 훌륭했습니다! – farjam

마침표를 사용하고 있기 때문에 마침표가있는 위치는 자연스럽게 발생합니다. 많은 옵션 중 하나는 글 머리 기호 인 •을 사용할 수 있지만 한 마디보다 무게가 큽니다.

출처

2013-07-15 20:41:55 Mike

FYI & middot; •으로 지정되지만 마침표와 동일한 가중치를가집니다. –

@AaronMiller Touche ... 나는 어떻게 든이 모든 것을 간과했습니다. – Mike

당신이 그것을 찾으러 갈 때까지는 당신이 실제로 발견 할 수있는 것이 아닙니다. –

당신은 당신이 원하는 곳이 줄을 얻기 위해 top: 및 left:/right: 위치를 지정하여 :before 및 :after 요소 position:absolute를 추가 한 후, position:relative에 "읽기 더"를 설정해야합니다. 텍스트 왼쪽에 여백을 추가해야합니다.

출처

2013-07-15 20:41:58

아니면 그냥 링크에 점선 배경을 추가하고 (단순하고 효과적인 스팬 ... 빨간색 배경으로 마스크 수 코드입니다 (배경이 단색이면)

출처

2013-07-15 20:44:57 drip

요소를 고정 너비로 만들려면이 효과에 점선 테두리를 사용할 수 있습니다.

<div style="padding-left:50px; border-top: 1px dotted black; width:125px;"> 
    <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div> 
</div>

물론, 레이아웃의 요구에 맞게 padding-left 및 width을 조정합니다.

여기에 직접보기 : http://jsfiddle.net/LDFQs/1/

출처

2013-07-15 20:48:34 Spudley

선도 나는 CSS에서 다음과 같은 효과를 만들려고 해요

답변

관련 문제