Hướng dẫn how do you change a string in css? - làm thế nào để bạn thay đổi một chuỗi trong css?

Làm cách nào để thay thế văn bản bằng CSS bằng phương pháp như thế này:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

Thay vì (

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

9), tôi cần sử dụng một cái gì đó có thể thay thế văn bản thay thế.

Tôi phải sử dụng

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

0

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

1 để làm cho nó hoạt động.

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

2

Tôi cần thay thế "sự thật".Facts".

Penny Liu

13.2k5 Huy hiệu vàng71 Huy hiệu bạc89 Huy hiệu đồng5 gold badges71 silver badges89 bronze badges

Hỏi ngày 25 tháng 10 năm 2011 lúc 21:58Oct 25, 2011 at 21:58

4

Hoặc có thể bạn có thể kết thúc 'sự thật' vòng một

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

3 như sau:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

Facts

ABRAR JAHIN

Huy hiệu vàng 13,5K2323 gold badges108 silver badges155 bronze badges

Đã trả lời ngày 18 tháng 12 năm 2012 lúc 21:03Dec 18, 2012 at 21:03

Matthew Cachiamatthew CachiaMatthew Cachia

4.2281 Huy hiệu vàng12 Huy hiệu bạc16 Huy hiệu đồng1 gold badge12 silver badges16 bronze badges

10

Bắt buộc: Đây là một hack: CSS không phải là nơi phù hợp để làm điều này, nhưng trong một số tình huống - ví dụ: bạn có thư viện bên thứ ba trong iframe chỉ có thể được tùy chỉnh bởi CSS - loại hack này là tùy chọn duy nhất .: This is a hack: CSS isn't the right place to do this, but in some situations - eg, you have a third party library in an iframe that can only be customized by CSS - this kind of hack is the only option.

Bạn có thể thay thế văn bản thông qua CSS. Hãy thay thế một nút màu xanh lá cây có từ 'Xin chào' bằng một nút màu đỏ có từ 'tạm biệt', sử dụng CSS.Let's replace a green button that has the word 'hello' with a red button that has the word 'goodbye', using CSS.

Before:

After:

Xem http://jsfiddle.net/zbj2m/274/ để biết bản demo trực tiếp:

Đây là nút màu xanh lá cây của chúng tôi:

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Bây giờ chúng ta hãy ẩn phần tử gốc, nhưng thêm một phần tử khối khác sau đó:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Note:

• Chúng tôi rõ ràng cần đánh dấu điều này thành một phần tử khối, các phần tử 'sau' theo mặc định theo mặc định
• Chúng ta cần bù cho phần tử ban đầu bằng cách điều chỉnh vị trí của yếu tố giả.
• Chúng ta phải ẩn phần tử gốc và hiển thị phần tử giả bằng

  button {
    visibility: hidden;
  }
  button:after {
    content:'goodbye'; 
    visibility: visible;
    display: block;
    position: absolute;
    background-color: red;
    padding: 5px;
    top: 2px;
  }
  

  4. Lưu ý

  button {
    visibility: hidden;
  }
  button:after {
    content:'goodbye'; 
    visibility: visible;
    display: block;
    position: absolute;
    background-color: red;
    padding: 5px;
    top: 2px;
  }
  

  5 trên phần tử ban đầu không hoạt động.

Đã trả lời ngày 10 tháng 1 năm 2013 lúc 15:55Jan 10, 2013 at 15:55

Mikemaccanamikemaccanamikemaccana

100K90 Huy hiệu vàng364 Huy hiệu bạc456 Huy hiệu Đồng90 gold badges364 silver badges456 bronze badges

9

Nếu bạn sẵn sàng sử dụng các yếu tố giả và để chúng chèn nội dung, bạn có thể làm như sau. Nó không cho rằng kiến ​​thức về yếu tố ban đầu và không yêu cầu đánh dấu bổ sung.

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

Ví dụ về JSfiddle

Đã trả lời ngày 26 tháng 2 năm 2014 lúc 22:14Feb 26, 2014 at 22:14

James Van Dykejames Van DykeJames van Dyke

4.6403 Huy hiệu vàng27 Huy hiệu bạc25 Huy hiệu Đồng3 gold badges27 silver badges25 bronze badges

10

Dựa trên câu trả lời của Mikemaccana, điều này đã làm việc cho tôi

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

original

§ Định vị tuyệt đối

Một yếu tố được định vị hoàn toàn được đưa ra khỏi dòng chảy và do đó không có dung lượng nào khi đặt các yếu tố khác.

Flim

Huy hiệu vàng 124K4040 gold badges237 silver badges252 bronze badges

Đã trả lời ngày 18 tháng 6 năm 2013 lúc 3:51Jun 18, 2013 at 3:51

1

Đây là đơn giản, ngắn và hiệu quả. Không cần thêm HTML.

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

Tôi đã phải làm điều này để thay thế văn bản liên kết, ngoài nhà, cho bánh mì WooC Commerce

Sass/Less

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

0

Đã trả lời ngày 16 tháng 4 năm 2015 lúc 18:16Apr 16, 2015 at 18:16

9ete9ete9ete

3.6421 Huy hiệu vàng33 Huy hiệu bạc32 Huy hiệu đồng1 gold badge33 silver badges32 bronze badges

Bạn không thể, tốt, bạn có thể.

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

1

Điều này sẽ chèn nội dung sau nội dung hiện tại của phần tử. Nó không thực sự thay thế nó, nhưng bạn có thể chọn cho một div trống và sử dụng CSS để thêm tất cả nội dung.

Nhưng trong khi bạn ít nhiều có thể, bạn không nên. Nội dung thực tế nên được đưa vào tài liệu. Thuộc tính nội dung chủ yếu dành cho đánh dấu nhỏ, như dấu ngoặc kép xung quanh văn bản sẽ xuất hiện được trích dẫn.

Đã trả lời ngày 25 tháng 10 năm 2011 lúc 22:02Oct 25, 2011 at 22:02

GoleztrolgoleztrolGolezTrol

Huy hiệu vàng 113K1717 gold badges181 silver badges204 bronze badges

3

Để sử dụng sau và ẩn nội dung gốc, bạn có thể sử dụng bản hack này:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

2

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

3

Cài đặt

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

6 thành 0 làm cho văn bản biến mất mà không xóa phần tử thực tế khỏi chế độ xem. Do đó, bộ chọn

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

7 hoạt động và sẽ hiển thị trên tất cả các trình duyệt.

Đã trả lời ngày 29 tháng 6 năm 2021 lúc 22:42Jun 29, 2021 at 22:42

ThatkookooguythatkookooguyThatkookooguy

6,4291 Huy hiệu vàng 30 Huy hiệu bạc52 Huy hiệu Đồng1 gold badge30 silver badges52 bronze badges

Hãy thử sử dụng

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

8 và

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

7. Một chèn văn bản sau khi HTML được hiển thị và các chèn khác trước khi HTML được hiển thị. Nếu bạn muốn thay thế văn bản, hãy trống nội dung nút.

Ví dụ này đặt văn bản nút theo kích thước của chiều rộng màn hình.

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

4

Nút văn bản:

1. Với

   button {
     visibility: hidden;
   }
   button:after {
     content:'goodbye'; 
     visibility: visible;
     display: block;
     position: absolute;
     background-color: red;
     padding: 5px;
     top: 2px;
   }
   

   8

   màn hình lớn

   màn hình lớn

2. Với

   button {
     visibility: hidden;
   }
   button:after {
     content:'goodbye'; 
     visibility: visible;
     display: block;
     position: absolute;
     background-color: red;
     padding: 5px;
     top: 2px;
   }
   

   7

   Màn hình xxxbig

   màn hình lớn

Với

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

7Sep 12, 2016 at 17:14

live-lovelive-lovelive-love

Màn hình xxxbig22 gold badges219 silver badges192 bronze badges

Đã trả lời ngày 12 tháng 9 năm 2016 lúc 17:14

44.7K22 Huy hiệu vàng219 Huy hiệu bạc192 Huy hiệu đồngMar 3, 2017 at 16:34

Tôi đã có may mắn hơn khi thiết lập

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

2 của phần tử bên ngoài và

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

6 của bộ chọn

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

7 cho bất cứ điều gì tôi cần.jerome

Đã trả lời ngày 3 tháng 3 năm 2017 lúc 16:3413 gold badges50 silver badges70 bronze badges

2

Jeromejeromekeep the tag empty and write your content in multiple data attributes like that

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

5. Display them with one of the pseudo classes

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

6

4.64713 Huy hiệu vàng 50 Huy hiệu bạc70 Huy hiệu Đồng

Nếu bạn chỉ muốn hiển thị các văn bản hoặc hình ảnh khác nhau, hãy giữ cho thẻ trống và ghi nội dung của bạn vào nhiều thuộc tính dữ liệu như thế

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

5. Hiển thị chúng với một trong các lớp giả

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

6

Bây giờ bạn có một loạt các cách khác nhau để chuyển đổi giữa chúng. Tôi đã sử dụng chúng kết hợp với các truy vấn truyền thông cho một cách tiếp cận thiết kế đáp ứng để thay đổi tên của điều hướng của tôi thành các biểu tượng.

Đã trả lời ngày 7 tháng 8 năm 2016 lúc 10:26Aug 7, 2016 at 10:26

RobbendebienerobbendebieneRobbendebiene

3.6762 Huy hiệu vàng25 Huy hiệu bạc31 Huy hiệu Đồng2 gold badges25 silver badges31 bronze badges

Cách đơn giản nhất tôi tìm thấy là bằng cách tạo phần tử

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

7, sau đó ghi đè lên nó với bất kỳ kích thước phông chữ nào khi tạo giả

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

7. Ví dụ dưới đây:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

5

Đã trả lời ngày 26 tháng 2 năm 2021 lúc 19:44Feb 26, 2021 at 19:44

AsammourasammourASammour

7878 Huy hiệu bạc11 Huy hiệu đồng8 silver badges11 bronze badges

Thay thế văn bản với các yếu tố giả và khả năng hiển thị CSS

HTML

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

6

CSS

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

7

Đã trả lời ngày 16 tháng 8 năm 2018 lúc 0:25Aug 16, 2018 at 0:25

Ahsan Aftabahsan AftabAhsan Aftab

1712 Huy hiệu bạc6 Huy hiệu đồng2 silver badges6 bronze badges

Điều này làm việc cho tôi với văn bản nội tuyến. Nó đã được thử nghiệm trong Firefox, Safari, Chrome và Opera.

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

8

Đã trả lời ngày 2 tháng 8 năm 2013 lúc 22:39Aug 2, 2013 at 22:39

1

Tôi sử dụng thủ thuật này:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

9

Tôi thậm chí đã sử dụng điều này để xử lý quốc tế hóa các trang bằng cách thay đổi một lớp cơ sở ...

Facts

0

Đã trả lời ngày 5 tháng 7 năm 2015 lúc 12:16Jul 5, 2015 at 12:16

Pete okpete okPete OK

1191 Huy hiệu bạc3 Huy hiệu đồng1 silver badge3 bronze badges

1

Hãy thử theo cách này:

Facts

1

Đã trả lời ngày 31 tháng 8 năm 2021 lúc 1:45Aug 31, 2021 at 1:45

1

Điều này thực hiện hộp kiểm dưới dạng nút hiển thị có hoặc không tùy thuộc vào trạng thái 'được kiểm tra' của nó. Vì vậy, nó thể hiện một cách thay thế văn bản bằng CSS mà không phải viết bất kỳ mã nào.

Nó vẫn sẽ hoạt động như một hộp kiểm khi trả về (hoặc không trả lại) giá trị bài đăng, nhưng từ quan điểm hiển thị, nó trông giống như một nút chuyển đổi.

Màu sắc có thể không theo ý thích của bạn, chúng chỉ ở đó để minh họa một điểm.

HTML là:

Facts

2

... và CSS là:

Facts

3

Tôi chỉ đã thử nó trên Firefox, nhưng đó là CSS tiêu chuẩn nên nó phải hoạt động ở nơi khác.

Đã trả lời ngày 12 tháng 11 năm 2015 lúc 15:05Nov 12, 2015 at 15:05

Sử dụng phần tử giả, phương pháp này không yêu cầu kiến ​​thức về phần tử gốc và không yêu cầu bất kỳ đánh dấu bổ sung nào.

Facts

4

Đã trả lời ngày 16 tháng 5 năm 2015 lúc 17:08May 16, 2015 at 17:08

VinvinVin

1.5854 Huy hiệu vàng24 Huy hiệu bạc33 Huy hiệu đồng4 gold badges24 silver badges33 bronze badges

Tôi đã gặp vấn đề khi tôi phải thay thế văn bản của liên kết, nhưng tôi không thể sử dụng JavaScript và tôi cũng không thể thay đổi trực tiếp văn bản của một siêu liên kết vì nó được biên dịch từ XML. Ngoài ra, tôi không thể sử dụng các yếu tố giả, hoặc dường như chúng không hoạt động khi tôi đã thử chúng.

Về cơ bản, tôi đặt văn bản tôi muốn vào một nhịp và đặt thẻ neo bên dưới nó và quấn cả hai trong một div. Về cơ bản, tôi đã di chuyển thẻ neo lên qua CSS và sau đó làm cho phông chữ trong suốt. Bây giờ khi bạn di chuột qua khoảng thời gian, nó "hành động" giống như một liên kết. Một cách thực sự hack để làm điều này, nhưng đây là cách bạn có thể có một liên kết với các văn bản khác nhau ...

Đây là một câu đố về cách tôi giải quyết vấn đề này

HTML của tôi

Facts

5

CSS của tôi

Facts

6

CSS sẽ cần thay đổi dựa trên yêu cầu của bạn, nhưng đây là một cách chung để làm những gì bạn đang hỏi.

Đã trả lời ngày 21 tháng 3 năm 2015 lúc 20:48Mar 21, 2015 at 20:48

Đấng toàn năngAlmightyWhy

4666 Huy hiệu bạc11 Huy hiệu Đồng6 silver badges11 bronze badges

1

Tôi đã tìm thấy một giải pháp như thế này trong đó một từ, "bóng tối", sẽ được rút ngắn thành "D" trên chiều rộng màn hình nhỏ hơn. Về cơ bản, bạn chỉ cần tạo kích thước phông chữ của nội dung gốc 0 và có dạng rút ngắn dưới dạng phần tử giả.

Trong ví dụ này, sự thay đổi xảy ra trên di chuột thay thế:

Facts

7

Facts

8

Đã trả lời ngày 28 tháng 12 năm 2019 lúc 21:11Dec 28, 2019 at 21:11

StefanbobstefanbobStefanBob

4.6832 Huy hiệu vàng30 Huy hiệu bạc37 Huy hiệu Đồng2 gold badges30 silver badges37 bronze badges

Sau tám năm, tôi đã phải đối mặt với thử thách tương tự khi cố gắng sử dụng tiện ích mở rộng trình duyệt sành điệu để thay đổi một cái gì đó trên một trang web (không phải của tôi). Và lần này tôi đã làm cho nó hoạt động bằng cách xem mã nguồn bằng cách sử dụng "phần tử kiểm tra" và tạo mã CSS dựa trên đó.

Đây là những gì nó trông như trước đây:

Facts

9

Đây là cùng một phần của HTML và CSS tôi đã sử dụng để sửa đổi kiểu:

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

0

Facts

9

Bạn có thể chạy mã ở trên và bạn sẽ thấy rằng nó hoạt động (được thử nghiệm trong Chrome).

---

Đây chỉ đơn giản là những gì tôi muốn trở lại trong những ngày tôi hỏi câu hỏi này.

Tôi đã sử dụng một số loại blog cộng đồng/MySpace tương tự và điều duy nhất bạn có khi tạo kiểu cho hồ sơ của bạn là Trình chỉnh sửa CSS của họ và đó là lý do tại sao tôi muốn chọn nó dựa trên phong cách.

Tôi đã tìm thấy câu trả lời ở đây:

• Bộ chọn CSS nâng cao - Chọn dựa trên kiểu dáng

• Bộ chọn CSS theo thuộc tính kiểu nội tuyến

Đã trả lời ngày 2 tháng 1 năm 2020 lúc 11:26Jan 2, 2020 at 11:26

MokitamokitaMokiTa

4.5303 Huy hiệu vàng15 Huy hiệu bạc16 Huy hiệu Đồng3 gold badges15 silver badges16 bronze badges

Không giống như những gì tôi thấy trong mỗi câu trả lời khác, bạn không cần sử dụng các phần tử giả để thay thế nội dung của thẻ bằng hình ảnh

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

2

Đã trả lời ngày 21 tháng 7 năm 2017 lúc 23:43Jul 21, 2017 at 23:43

EsteckaesteckaEstecka

3681 Huy hiệu bạc15 Huy hiệu đồng1 silver badge15 bronze badges

2

Vâng, như nhiều người đã nói đây là một hack. Tuy nhiên, tôi muốn thêm nhiều bản hack cập nhật hơn, điều này tận dụng lợi thế là

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

9 và

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

0, tức là.

• Bạn không muốn định vị thủ công văn bản này để thay đổi, đó là lý do tại sao bạn muốn tận dụng

  .element {
    text-indent: -9999px;
    line-height: 0; /* Collapse the original line */
  }
  
  .element::after {
    content: "New text";
    text-indent: 0;
    display: block;
    line-height: initial; /* New content takes up original line height */
  }
  

  9
• Bạn không muốn sử dụng

  button {
    position: absolute;
    visibility: hidden;
  }
  
  button:before {
    content: "goodbye";
    visibility: visible;
  }

  2 và/hoặc

  button {
    position: absolute;
    visibility: hidden;
  }
  
  button:before {
    content: "goodbye";
    visibility: visible;
  }

  3 cho văn bản bằng cách sử dụng

  button {
    position: absolute;
    visibility: hidden;
  }
  
  button:before {
    content: "goodbye";
    visibility: visible;
  }

  4, cho các kích thước màn hình khác nhau trên các thiết bị và trình duyệt khác nhau có thể cung cấp cho đầu ra khác nhau

Đây là giải pháp, trong ngắn hạn

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

9 đảm bảo rằng nó được định vị tự động một cách hoàn hảo và

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

0 được tiêu chuẩn hóa hơn (và tự động) cho các pixel.

CodeSandBox với mã bên dưới và đầu ra dưới dạng ảnh chụp màn hình, hãy đọc

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

7 bên dưới mã!

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

3

Lưu ý: Đối với các thẻ khác nhau, bạn có thể cần các giá trị khác nhau của

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

0, cái này đã được chứng minh cho

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

9 và chỉ trên các màn hình lớn. Tuy nhiên, với

original

0, bạn có thể dễ dàng mở rộng điều này cho các thiết bị di động.

Đã trả lời ngày 12 tháng 6 năm 2020 lúc 20:38Jun 12, 2020 at 20:38

Thí dụ

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

4

Đầu ra

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

5

Đã trả lời ngày 9 tháng 12 năm 2020 lúc 11:07Dec 9, 2020 at 11:07

Fefar Ravifefar RaviFefar Ravi

6887 Huy hiệu bạc16 Huy hiệu Đồng7 silver badges16 bronze badges

Điều này không thực sự có thể nếu không có thủ thuật. Đây là một cách hoạt động bằng cách thay thế văn bản bằng một hình ảnh của văn bản.

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

6

Loại điều này thường được thực hiện với JavaScript. Đây là cách nó có thể được thực hiện với jQuery:

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

7

Đã trả lời ngày 25 tháng 10 năm 2011 lúc 22:06Oct 25, 2011 at 22:06

Nathan Manousosnathan ManousosNathan Manousos

12.8k2 Huy hiệu vàng26 Huy hiệu bạc37 Huy hiệu đồng2 gold badges26 silver badges37 bronze badges

4

Cách để thực hiện công việc này là thêm chiều cao dòng vào nội dung CSS. Điều này sẽ làm cho khối được nhìn thấy phía trên ẩn, do đó điều này sẽ không ẩn văn bản đã thay đổi.

Ví dụ với việc sử dụng trước:before:

Hello

button {
  background-color: green;
  color: black;
  padding: 5px;
}

8

Đã trả lời ngày 2 tháng 1 năm 2019 lúc 10:25Jan 2, 2019 at 10:25

Làm thế nào để bạn thay đổi văn bản trong CSS?

Làm cách nào để thay đổi nội dung của một phần tử trong CSS?

Làm thế nào để bạn thay thế văn bản trong html?

Làm thế nào để bạn thay đổi trường hợp trong CSS?