: before에 추가 된 콘텐츠에 호버 효과를 적용하지 않는 방법은 무엇입니까? CSS
마이크
나는 링크에 : before 속성에 '>'를 추가하고 있지만 : hover 효과를 적용하면 스타일도 취 text-decoration: underline;하므로 추가 된 내용에 효과를 적용하지 않아야합니다. : before, 나는이 엉을 해결하려고했습니다. 옵션
a:before {
content: '> ';
position: relative;
display: inline-block;
margin-right: 5px;
pointer-events: none;
}
a:before:hover {
content: '>';
pointer-events: none;
}
a:before:hover {
text-decoration:none;
}
그러나 아무것도 작동하지 않습니다.
이것은 링크가 호버로 작동하는 방식입니다.
여기 내 코드의 예입니다, 구조, <a>내부는 <p>내용이 텍스트 편집기에서이기 때문이다
.super {
color: rgb(40, 40, 40);
background-color: rgb(239, 239, 239);
margin-bottom: 35px;
padding: 10px;
}
p {
position: relative;
word-break: break-word;
font-size: 17px;
padding: 0px;
}
a {
left: 0px;
display: flex;
position: relative;
left: 0;
display: flex;
text-decoration: none;
}
a::before {
content: '> ';
position: relative;
display: inline-block;
margin-right: 5px;
}
a:hover{
text-decoration:underline;
}<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div> FluffyKitten
작동하지 않을 경우 중지되는 코드에는 두 가지가 있습니다.
- 주된 이유는
display:flex - 당신은 또한 잘못된 순서를 가지고
:hover:before있지만display:flex어쨌든 작동하지 않기 때문에 그것은 중요하지 않습니다 .
a요소에 대한 기본 표시를 사용하면 텍스트 밑줄은 :before의사 요소를 사용하여 추가 된 콘텐츠에 영향을주지 않습니다 . 그러나 사용 display:flex이 표시되고 텍스트 밑줄에 추가 된 내용에 추가되도록하는 방법을 변경 a:before 뿐만 아니라 링크 텍스트 :
작업 예 :
업데이트 : 당신의 충족시키기 위해 새로운 긴 링크를 들여 쓰기의 새로운 요구를 하고 HTML을 변경할 수없는.
.super {
color: rgb(40, 40, 40);
background-color: rgb(239, 239, 239);
margin-bottom: 35px;
padding: 10px;
}
p {
position: relative;
word-break: break-word;
font-size: 17px;
padding: 0px;
}
a {
position: relative;
text-decoration: none;
display: block;
padding-left: 15px;
}
a:before {
content: '>';
position:absolute;
left:0;
top: 0;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:hover:before{
text-decoration:none;
}<div class='super'>
<p>
<a href='https://google.com' target='_blanck'><span>This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link This is a very long link</span></a>
</p>
</div>또한 FYI, :hoverand :before함께 사용하는 올바른 방법 은 :hover:before이지만이 경우 display:flex아래에서 볼 수 있듯이 사용할 때 차이가 없습니다 .
올바른 CSS a:hover:before 를 사용하는 예제 display:flex(보시다시피 작동하지 않음) :
.super {
color: rgb(40, 40, 40);
background-color: rgb(239, 239, 239);
margin-bottom: 35px;
padding: 10px;
}
p {
position: relative;
word-break: break-word;
font-size: 17px;
padding: 0px;
}
a {
left: 0px;
display:flex;
position: relative;
text-decoration: none;
}
a::before {
content: '> ';
position: relative;
display: inline-block;
margin-right: 5px;
text-decoration:none!important;
}
a:hover{
text-decoration:underline;
}
a:hover::before {
text-decoration:none!important;
}<div class='super'>
<p>
<a href='https://google.com' target='_blanck'>Example to link</a>
</p>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
동적으로 추가 된 새 콘텐츠에 클래스를 추가하는 방법은 무엇입니까?
- 2
CSS 호버 효과에서 이전 콘텐츠를 잃지 않고 div에 이미지를 추가하는 방법
- 3
덮어 쓰지 않고 로그 파일에 콘텐츠를 추가하는 방법은 무엇입니까?
- 4
추가 된 콘텐츠를 변경하는 방법은 무엇입니까?
- 5
HTML5의 헤더에 호버 효과를 추가하는 방법은 무엇입니까?
- 6
드롭 다운에 호버 효과를 추가하는 방법은 무엇입니까?
- 7
fancybox 3 iframe에 추가 콘텐츠를 추가하는 방법은 무엇입니까?
- 8
jQuery 또는 JavaScript를 사용하여 ckeditor에 콘텐츠를 추가하는 방법은 무엇입니까?
- 9
동적으로 추가 된 콘텐츠에서 knockout.js의 이벤트를 바인딩하는 방법은 무엇입니까?
- 10
CSS를 사용하여 버튼에 호버 효과를 추가하는 방법
- 11
AngularJS + Angular Strap-클릭 한 버튼에 따라 모달에 동적 콘텐츠를 추가하는 방법은 무엇입니까?
- 12
닫는 태그 앞에 여러 div 안에 콘텐츠를 추가하는 방법은 무엇입니까?
- 13
색인화 된 버전 만 Solr에 원본 콘텐츠를 저장하지 않는 방법은 무엇입니까?
- 14
자바 스크립트에서 PHP 루프에 콘텐츠를 추가하는 방법은 무엇입니까?
- 15
JavaScript에서 sap.m.Column에 콘텐츠를 추가하는 방법은 무엇입니까?
- 16
dd로 지정된 두 점을 사용하여 단일 파일에서 콘텐츠를 추출하는 방법은 무엇입니까?
- 17
CSS에서 호버 효과를 비활성화하는 방법은 무엇입니까?
- 18
자바 스크립트를 사용하여 jsp 페이지에 콘텐츠를 동적으로 추가하는 방법은 무엇입니까?
- 19
콘텐츠 위에서 페이드 인하는 중앙 div를 추가하는 방법은 무엇입니까?
- 20
포함 후 헤더에 콘텐츠를 추가하는 방법은 무엇입니까?
- 21
Spring oauth2 액세스 토큰에 콘텐츠를 추가하는 방법은 무엇입니까?
- 22
CurlSharp의 문자열에 HTML 콘텐츠를 추가하는 방법은 무엇입니까?
- 23
선택한 div의 html 콘텐츠를 텍스트 영역에 추가하는 방법은 무엇입니까?
- 24
CSS에서 두 개의 콘텐츠를 서로간에 사용하는 방법은 무엇입니까?
- 25
인증 된 사용자에게만 비공개 콘텐츠를 제공하는 방법은 무엇입니까?
- 26
CSS-콘텐츠를 단락의 너비 / 높이에 맞추는 방법은 무엇입니까?
- 27
inputtextarea에서 콘텐츠가 포함 된 xml 파일을 다운로드하는 방법은 무엇입니까?
- 28
페이지의 모든 div에 마우스 오버시 호버 효과를 추가하는 방법은 무엇입니까?
- 29
iframe (Google Map)의 콘텐츠를 가로로 중앙에 배치하는 방법은 무엇입니까? 작동하지 않는 일반적인 방법
몇 마디 만하겠습니다