CSS nổi bật khác màu từ văn bản?

268

Các phần tử HTML del, strikehoặc scó thể tất cả được sử dụng cho một văn bản tấn công qua có hiệu lực. Ví dụ:

<del>del</del>

.... cho: ~~del~~

<strike>strike</strike> and <s>strike</s>

.... đưa ra: ~~đình công~~ và ~~đình công~~

text-decorationThuộc tính CSS có giá trị line-throughcó thể được sử dụng tương tự. Mật mã...

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

... cũng sẽ hiển thị giống như: ~~text-trang trí: line-through~~

Tuy nhiên, dòng gạch ngang thường có cùng màu với văn bản.

CSS có thể được sử dụng để làm cho dòng có màu khác không?

html css

— gojomo
nguồn

Đối với một cuộc đình công minh bạch thông qua hiệu ứng, bạn có thể thấy cuộc đình công trong suốt trên văn bản

— web-tiki

Câu trả lời:

408

Có, bằng cách thêm một yếu tố gói thêm. Gán màu dòng qua mong muốn cho một phần tử bên ngoài, sau đó màu văn bản mong muốn cho phần tử bên trong. Ví dụ:

<span style='color:red;text-decoration:line-through'>
  <span style='color:black'>black with red strikethrough</span>
</span>

Mở rộng đoạn trích

...hoặc là...

<strike style='color:red'>
  <span style='color:black'>black with red strikethrough<span>
</strike>

Mở rộng đoạn trích

(Lưu ý, tuy nhiên, <strike>được coi là phản đối trong HTML4 và lỗi thời trong HTML5 ( xem thêm W3.org ). Phương pháp khuyến cáo là sử dụng <del>nếu một ý nghĩa thực sự xóa được thiết kế, hoặc sử dụng một <s>yếu tố hay phong cách với text-decorationCSS như trong ví dụ đầu tiên ở đây.)

Để làm cho đường gạch ngang xuất hiện cho: hover, <HEAD>phải sử dụng biểu định kiểu rõ ràng (được khai báo hoặc tham chiếu trong ). (Lớp :hovergiả không thể được áp dụng với các thuộc tính STYLE nội tuyến.) Ví dụ:

<head>
  <style>
    a.redStrikeHover:hover {
      color:red;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <a href='#' class='redStrikeHover'>
    <span style='color:black'>hover me</span>
  </a>
</body>

Mở rộng đoạn trích

(IE7 dường như yêu cầu một số hrefcài đặt <a>trước :hovercó hiệu lực; các trình duyệt dựa trên FF và WebKit thì không.)

— gojomo
nguồn

Quá nhiều cho "điều đó là không thể!" câu trả lời.

— John Kugelman

Jquery thực hiện sẽ rất hữu ích.

— yakunin

@utype Tại sao bạn lại sử dụng jQuery cho việc này?

— kapa

Yếu tố bao bọc kinda mút. Trong hầu hết các trường hợp, bạn có thể đạt được hiệu quả gần như tương tự với giả đơn giản, tức là del { position:relative }và sau đó del::after { content:'', position:absolute; top: 50%; left: 0; right:0; border-bottom: 1px solid #f00 }.

— hóa thân

Chỉ là một cái bọc. Khéo léo. Ôi chúa ơi, điều đó tốt hơn tất cả mọi thứ tôi nghĩ ra (yếu tố giả). Bạn đã làm rất tốt!

— Xảo quyệt

Kể từ tháng 2 năm 2016 , CSS 3 có hỗ trợ được đề cập dưới đây. Đây là đoạn trích từ trang sản phẩm duy nhất của WooC Commerce với mức giá chiết khấu

/*Price before discount on single product page*/
body.single-product .price del .amount {
color:           hsl(0, 90%, 65%);
font-size:       15px;
text-decoration: line-through;
/*noinspection CssOverwrittenProperties*/
text-decoration: white double line-through; /* Ignored in CSS1/CSS2 UAs */
}

Kết quả là:

CSS 3 có thể sẽ có hỗ trợ trực tiếp bằng cách sử dụng thuộc text-decoration-colortính . Đặc biệt:

Các text-decoration-colorthuộc tính CSS đặt màu được sử dụng khi vẽ đường gạch dưới, overlines, hoặc tấn công sang người tiêu dùng theo quy định của text-decoration-line. Đây là cách ưa thích để tô màu các trang trí văn bản này, thay vì sử dụng kết hợp các yếu tố HTML khác.

Cũng xem text-decoration-colortrong bản phác thảo CSS 3 .

Nếu bạn muốn sử dụng phương pháp này ngay lập tức, có lẽ bạn phải thêm tiền tố vào nó, sử dụng -moz-text-decoration-color. (Cũng chỉ định nó mà không -moz-, để tương thích về phía trước.)

— Ốc cơ khí
nguồn

"CSS 3 có thể sẽ có" khá ... lạc quan.

— BoltClock

@BoltClock: Làm thế nào là lạc quan? Nó đã có trong dự thảo hoạt động của W3C, đang được tích cực theo đuổi.

— Ốc cơ khí

Theo caniuse , hiện tại không có trình duyệt nào (trong năm 2014) hỗ trợ text-decoration-colormà không có tiền tố.

— Blazemonger

Và 3 năm sau ... Firefox và Safari có nó = 20% phạm vi tiếp cận.

— André Werlang

theo caniuse, hiện chỉ được FireFox hỗ trợ

— YakovL

Tôi đã sử dụng một :afteryếu tố trống và trang trí một đường viền trên nó. Bạn thậm chí có thể sử dụng các biến đổi CSS để xoay nó cho một đường xiên. Kết quả: CSS thuần túy, không có yếu tố HTML bổ sung! Nhược điểm: không bao trùm trên nhiều dòng, mặc dù IMO bạn không nên sử dụng gạch ngang trên các khối văn bản lớn.

s,
strike {
  text-decoration: none;
  /*we're replacing the default line-through*/
  position: relative;
  display: inline-block;
  /* keeps it from wrapping across multiple lines */
}

s:after,
strike:after {
  content: "";
  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 2px solid red;
  height: 45%;
  /* adjust as necessary, depending on line thickness */
  /* or use calc() if you don't need to support IE8: */
  height: calc(50% - 1px);
  /* 1px = half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
}

<p>Here comes some <strike>strike-through</strike> text!</p>

Mở rộng đoạn trích

— Blazemonger
nguồn

Phần tử tấn công @Veve HTML - phiên bản phi ngữ nghĩa

— Blazemonger 19/03/2015

cảm ơn, tôi đã tìm kiếm cái này, đặc biệt là dòng xoay

— hanan-mstudio

Sử dụng phương thức sau: có thể có vấn đề với khả năng truy cập

— ewanm89

Nếu bạn không quan tâm đến internet explorer \ edge, thì cách đơn giản nhất để đạt được màu sắc khác nhau để sử dụng là sử dụng thuộc tính CSS: text-trang trí-màu kết hợp với trang trí văn bản: line-through;

.yourClass {
    text-decoration: line-through !important;
    text-decoration-color: red !important;
}

- Không hoạt động với Edge \ Internet Explorer

— Rohin Tak
nguồn

CSS3 này sẽ giúp bạn chuyển qua thuộc tính dễ dàng hơn và hoạt động tốt.

span{
    text-decoration: line-through;
    text-decoration-color: red;
}

— Vishnu SR
nguồn

Thêm vào @gojomo bạn có thể sử dụng :afterphần tử giả cho phần tử bổ sung. Thông báo trước là bạn sẽ cần phải xác định của bạn innerTexttrong một data-textthuộc tính kể từ CSS đã hạn chế contentchức năng.

s {
  color: red;
  text-align: -1000em;
  overflow: hidden;
}
s:after {
  color: black;
  content: attr(data-text);
}

<s data-text="Strikethrough">Strikethrough</s>

Mở rộng đoạn trích

— ibolmo
nguồn

Đây là một cách tiếp cận sử dụng một gradient để giả mạo dòng. Nó hoạt động với các cuộc đình công đa dòng và không cần thêm các yếu tố DOM. Nhưng vì nó là một gradient nền, nó nằm phía sau văn bản ...

del, strike {
  text-decoration: none;
  line-height: 1.4;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.63em, transparent), color-stop(0.63em, #ff0000), color-stop(0.7em, #ff0000), color-stop(0.7em, transparent), to(transparent));
  background-image: -webkit-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: -o-linear-gradient(top, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  background-image: linear-gradient(to bottom, transparent 0em, transparent 0.63em, #ff0000 0.63em, #ff0000 0.7em, transparent 0.7em, transparent 1.4em);
  -webkit-background-size: 1.4em 1.4em;
  background-size: 1.4em 1.4em;
  background-repeat: repeat;
}

Xem fiddle: http://jsfiddle.net/YSvaY/

Điểm dừng màu và kích thước nền phụ thuộc vào chiều cao dòng. (Tôi đã sử dụng LESS để tính toán và Autoprefixer sau đó ...)

— simbo
nguồn

Ở đây bạn đi:

<style>body {color: #000;}</style>
<del>&nbsp;&nbsp;<span style="color:#999">facebook</span>&nbsp;&nbsp;</del>

Mở rộng đoạn trích

— Kardash
nguồn

Theo kinh nghiệm của tôi

<span style='color:red;text-decoration:line-through'>
    <span style='color:black'>black with red strikethrough</span>
</span>

không phải là lựa chọn tốt nhất Tôi đã có một đồng nghiệp sử dụng phương pháp này mà không kiểm tra trình duyệt chéo, vì vậy tôi phải quay lại và sửa nó vì nó gây ra sự cố trong firefox. Đề xuất cá nhân của tôi sẽ là sử dụng: sau bộ chọn để tạo đường chuyền. Bằng cách đó, nó có thể quay trở lại IE8 nếu bạn thực sự muốn mà không có bất kỳ xung đột phong cách nào cũng như vững chắc trên tất cả các trình duyệt khác.

Nó cũng tạo ra ít đánh dấu hơn và về cùng một kiểu dáng mà theo tôi là một vấn đề khá lớn.

Vì vậy, nếu bất cứ ai khác gặp phải vấn đề tương tự, hy vọng điều này có thể giúp đỡ:

.lineThrough {
    position: relative;

   &:after {
      content: "  ";
      display: block;
      width: 60px;
      height: 1px;
      background: red;
      position: absolute;
      top: 49%;
      left: 50%;
      margin-left: -30px;
   }
}

rõ ràng bạn có thể sử dụng biến đổi: dịch thay vì lề, nhưng ví dụ này là để hoạt động trở lại IE8

— Brady Edgar
nguồn

Trả lời của Blazemonger (trên hoặc dưới) cần bỏ phiếu - nhưng tôi không có đủ điểm.

Tôi muốn thêm một thanh màu xám trên một số nút tròn CSS rộng 20px để cho biết "không khả dụng" và điều chỉnh css của Blazemonger's:

.round_btn:after {
    content:"";    /* required property */
    position: absolute;
    top: 6px;
    left: -1px;
    border-top: 6px solid rgba(170,170,170,0.65);
    height: 6px;
    width: 19px;
}

— anoldermark
nguồn

Việc chỉ định màu xuyên dòng mong muốn cho phần tử cha cũng hoạt động cho phần tử văn bản đã xóa ( <del>) - làm cho giả định máy khách hiển thị <del>dưới dạng dòng.

http://jsfiddle.net/kpowz/vn9RC/

— kpowz
nguồn

-4

Đây là một triển khai jQuery mẫu - nhờ câu trả lời của gojomo và đề xuất của utype (+1 cho cả hai)

$(function(){
  //===================================================================
  // Special price strike-out text
  // Usage:
  //   Normally:    <span class='price'>$59</span>
  //   On special:  <span class='price' special='$29'>$59</span>
  //===================================================================
  $(".price[special]").each(function() {
    var originalPrice = $(this).text();
    $(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
           .removeAttr('special')
           .addClass('special');
  });
});

CSS cho điều đó có thể là

.price strike, .price.special { color: Red; }
.price strike span { color: Black; }

— Aimumili
nguồn

Phần nào không hợp lệ? Nó hoạt động trên tất cả các trình duyệt chính

— Aimumili

"Tác phẩm" và "hợp lệ" cách nhau khá xa. Các trình duyệt cố gắng diễn giải ngay cả HTML có một số lỗi trong đó. Xem Dịch vụ xác thực đánh dấu W3C , tại sao HTML hợp lệ lại quan trọng đối với mọi người? , HTML thuộc tính DIV hợp lệ? trên SO

— kapa

Nếu tôi không nhầm, việc thay đổi tên thuộc tính thành "đặc biệt dữ liệu" sẽ khiến nó trở thành HTML5 hợp lệ.

— Muhd

jQuery để thêm một trình bao bọc để có được một cuộc đình công màu? Chúng ta đã trở thành cái gì?!

— Chris Baker

Có vẻ như có thể xảy ra sự cố XSS: bạn có văn bản đơn giản originalPrice, sau đó đưa nó trở lại dưới dạng HTML. Hãy thử sử dụng .html()thay vì .text(). Hoặc có thể sử dụng jQuery wrap().

— tuomassalo