CSS: trang trí văn bản không thể xóa đường viền

Question

Tôi đang cố xóa văn bản trang trí khỏi chữ cái đầu tiên bằng cách sử dụng bộ chọn p::first-letter. Nhưng đối với một số lý do không rõ tôi không thể làm điều đó.

p::first-line { 
 
    font-weight: bold; 
 
    text-decoration: overline; 
 
} 
 
p::first-letter { 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Cập nhật:

Được rồi, tôi đã nhận nó làm việc bằng cách Chrome bằng cách cho phép "tính năng Web Platform nghiệm". Vì một số lý do, tiền tố -webkit- không thể kích hoạt hành vi này. Đây là mã làm việc.

p::first-letter{ 
     text-decoration: overline; 
     text-decoration-color: rgba(59, 119, 191, 0.68); 
     display: block; 
     color: red; 
     font-weight: bold; 
     background-color: rgba(59, 119, 191, 0.68); 
     margin: 0px 2px 1px 0; 
     padding: 5px 13px 5px 11px; 
     color: #b1ffea; 
    } 

Answer 1

Chỉ cần thêm:

p::first-letter { 
    float: left; 
} 

Vì vậy, nó là:

p::first-line { 
 
    font-weight: bold; 
 
    text-decoration: overline; 
 
} 
 
p::first-letter { 
 
    float: left; 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Answer 2

Không chắc chắn, nếu đây là giải pháp phù hợp cho nó.

nhưng có, chúng tôi có thể bỏ qua trang trí văn bản bằng cách sử dụng văn bản-trang trí bỏ qua link1, link2, nhưng có vẻ như không phù hợp ở đây.

Tôi đã cố gắng để làm cho L và phần còn lại của nội dung như các yếu tố riêng biệt và thêm text-decoration với nó (tôi biết không phải là quyền của mình), nhưng có thể giúp bạn

div{ 
 
    display:flex; 
 
} 
 
p.overline::first-line{ 
 
    display:inline-block; 
 
    width:100%; 
 
    font-weight: bold; 
 
text-decoration:overline; 
 
} 
 

 
p:first-child::first-letter { 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 

 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 
<div> 
 
<p >L</p> 
 

 
    
 
<p class="overline">orem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p> 
 
</div>

Hy vọng nó giúp

Answer 3

Đây là một chút hack-y, nhưng bạn có thể dễ dàng thoát khỏi sự overline không mong muốn bằng cách vẽ một khối nhỏ của màu sắc trên đầu trang, sử dụng ::after phần tử giả.

p::first-line { 
 
    font-weight: bold; 
 
    text-decoration: overline; 
 
} 
 

 
p::first-letter { 
 
    text-decoration: none; 
 
    /*text-decoration-color: rgba(59, 119, 191, 0.68);*/ 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    background-color: rgba(59, 119, 191, 0.68); 
 
    margin: 0px 2px 1px 0; 
 
    padding: 5px 13px 5px 11px; 
 
    color: #b1ffea; 
 
} 
 

 
p { 
 
position: relative; 
 
} 
 

 
p::after { 
 
content: ''; 
 
display:block; 
 
position:absolute; 
 
top:0; 
 
left:10px; 
 
width: 16px; 
 
height: 8px; 
 
background-color: rgb(122,163,212); 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Answer 4

Bạn có thể che giấu rằng việc sử dụng pseudo selector như dưới đây,

p::first-line{ 
 
    font-weight: bold; 
 
    text-decoration:overline; 
 
    z-index:-1; 
 
    position:absolute; 
 
} 
 
p::first-letter { 
 
    display: block; 
 
    color: red; 
 
    font-weight: bold; 
 
    padding: 2px 0px 0px 0px; 
 
} 
 
p::before{ 
 
    content:''; 
 
    width:10px; 
 
    height:1px; 
 
    background:rgba(250,250,250,1); 
 
    position:absolute; 
 
}

<h2>Heading <a href="#"><span class="anchor">#</span></a></h2> 
 

 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur eaque enim eveniet facere incidunt inventore necessitatibus non quas, repellat sed ullam unde ut vitae! Asperiores ducimus laborum magnam officia repellendus. 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsum laborum sunt voluptate voluptates voluptatum. A architecto beatae delectus eos itaque magnam nostrum perferendis, provident quis quos repellendus similique vitae! 
 
Lorem ipsum dolor sit amet, consectetur <a href="#">some link</a> adipisicing elit. Ducimus itaque numquam voluptatem. Ad aspernatur consequuntur deserunt et expedita facilis id, iste maxime minus nisi odit quaerat quisquam quod tempora velit? 
 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos <a href="#">another link</a> illo iure magni odio quas, sint totam ut. Aliquam ipsa recusandae voluptatem! A consectetur deserunt eos quaerat rerum. Dolores, quod voluptatem.</p>

Ở đây cũng vậy nếu tôi thay đổi p::beforebackground:transparent; sẽ không hoạt động, như trong nền bao gồm text-decoration:overline;. Vì vậy, đây là cách bạn có thể che giấu điều đó. Chỉ cần nhận chính xác background-color cho số pseudo ::before background-color của bạn.

Một vấn đề khác là cả ::first-line và ::first-letter không hỗ trợ tất cả các thuộc tính tạo kiểu CSS.