텍스트를 CSS로 바꾸려면 어떻게해야합니까?

다음과 같은 방법을 사용하여 텍스트를 CSS로 바꾸려면 어떻게해야합니까?

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

대신에 ( img[src*="IKON.img"] ) 대신 텍스트를 대신 할 수있는 것을 사용해야합니다.

[ ]작동 시키려면 사용해야 합니다.

<div class="pvw-title">Facts</div>

" Facts " 를 교체해야합니다 .

또는 <span>다음과 같이 'Facts'를 a 로 감쌀 수 있습니다.

<div class="pvw-title"><span>Facts</span></div>

그런 다음 사용하십시오.

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

의무 : 이것은 해킹입니다 : CSS는이 작업을 수행하기에 적합한 장소는 아니지만 일부 상황에서-예를 들어 CSS로만 사용자 정의 할 수있는 iframe에 타사 라이브러리가 있습니다-이러한 종류의 해킹은 유일한 옵션입니다 .

CSS를 통해 텍스트를 바꿀 수 있습니다. CSS를 사용하여 녹색 버튼을 'hello'로 바꾸고 'goodbye'라고 표시된 빨간 버튼으로 바꿉니다.

전에:

후:

http://jsfiddle.net/ZBj2m/274/ 참조라이브 데모는 를 .

녹색 버튼은 다음과 같습니다.

<button>Hello</button>

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

이제 원래 요소를 숨기고 나중에 다른 블록 요소를 추가하십시오.

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

노트 :

• 우리는 이것을 명시 적으로 블록 요소로 표시해야합니다 .'after '요소는 기본적으로 인라인입니다.
• 의사 요소의 위치를 ​​조정하여 원래 요소를 보정해야합니다.
• 원래 요소를 숨기고를 사용하여 의사 요소를 표시해야합니다 visibility. display: none원래 요소에 대한 참고 사항 이 작동하지 않습니다.

의사 요소를 사용하고 내용을 삽입하게하려면 다음을 수행하십시오. 원래 요소에 대한 지식이 없으며 추가 마크 업이 필요하지 않습니다.

.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 */
}

JSFiddle 예제

mikemaccana의 답변을 바탕으로 , 이것은 나를 위해 일했습니다.

button {
  position: absolute;
  visibility: hidden;
}

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

§ 절대 위치

절대적으로 배치 된 요소는 흐름에서 제거되므로 다른 요소를 배치 할 때 공간을 차지하지 않습니다.

이것은 간단하고 짧으며 효과적입니다. 추가 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 */
    }

WooCommerce를 위해 집 이외의 링크 텍스트를 바꾸려면이 작업을 수행해야했습니다. 빵 부스러기를

사스 / 이하

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

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

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

당신은 할 수 없습니다.

.pvw-title:after {
  content: "Test";
}

요소의 현재 내용 뒤에 내용이 삽입됩니다 . 실제로 그것을 대체하지는 않지만 빈 div를 선택하고 CSS를 사용하여 모든 내용을 추가 할 수 있습니다.

그러나 당신이 어느 정도 할 수는 있지만 그렇게해서는 안됩니다. 실제 내용은 문서에 넣어야합니다. content 속성은 주로 따옴표로 묶어야하는 텍스트 주위의 따옴표와 같은 작은 태그를위한 것입니다.

사용 시도 :before및:after . 하나는 HTML 렌더링 후 텍스트를 삽입하고 다른 하나는 HTML 렌더링 전에 텍스트를 삽입합니다. 텍스트를 바꾸려면 버튼 내용을 비워 두십시오.

이 예에서는 화면 너비의 크기에 따라 단추 텍스트를 설정합니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

버튼 텍스트 :

1. 와 :before

   큰 screenxxx

   큰 화면

2. 와 :after

   xxx 큰 화면

   큰 화면

당신은 단지 다른 텍스트 나 이미지를 표시 할 경우, 태그가 비어 여러 데이터 속성의 콘텐츠 쓰기 계속 그런를 <span data-text1="Hello" data-text2="Bye"></span>. 의사 클래스 중 하나를 사용하여 표시:before {content: attr(data-text1)}

이제 여러 가지 방법으로 전환 할 수 있습니다. 내 탐색 이름을 아이콘으로 변경하기 위해 반응 형 디자인 방식을 위해 미디어 쿼리와 함께 사용했습니다.

jsfiddle 데모 및 예제

_{그것은 질문에 완벽하게 대답하지 못할 수도 있지만 내 요구와 다른 사람들도 만족시킬 것입니다.}

나는 설정을 더 행운이 있었다 font-size: 0외부 요소를, 그리고 font-size의 :after선택 내가 필요로 무엇이든합니다.

이것은 인라인 텍스트로 저에게 효과적이었습니다. Firefox, Safari, Chrome 및 Opera에서 테스트되었습니다.

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>

span {
    visibility: hidden;
    word-spacing: -999px;
    letter-spacing: -999px;
}

span:after {
    content: "goodbye";
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}

이 트릭을 사용합니다.

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

심지어 기본 클래스를 변경하여 페이지 국제화를 처리하기 위해 이것을 사용했습니다 ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

의사 요소 및 CSS 가시성으로 텍스트 대체

HTML

<p class="replaced">Original Text</p>

CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

의사 요소를 사용하는이 방법은 원래 요소에 대한 지식이 필요하지 않으며 추가 마크 업이 필요하지 않습니다.

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}

'체크 된'상태에 따라 예 또는 아니오를 표시하는 버튼으로 확인란을 구현합니다. 따라서 코드를 작성하지 않고도 CSS를 사용하여 텍스트를 바꾸는 한 가지 방법을 보여줍니다.

POST 값을 반환 (또는 반환하지 않는 한) 여전히 확인란처럼 작동하지만 표시 관점에서는 토글 버튼처럼 보입니다.

원하는 색상이 아닐 수도 있습니다.

HTML은 다음과 같습니다

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... 그리고 CSS는 :

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

Firefox에서만 시도했지만 표준 CSS이므로 다른 곳에서 작동해야합니다.

다른 모든 답변에서 볼 수있는 것과 달리 태그의 내용을 이미지로 바꾸기 위해 의사 요소를 사용할 필요가 없습니다.

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

트릭 없이는 실제로 불가능합니다. 다음은 텍스트를 텍스트 이미지로 바꾸어 작동하는 방법입니다.

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

이러한 유형의 작업은 일반적으로 JavaScript로 수행됩니다. 다음은 jQuery로 수행 할 수있는 방법입니다.

$('.pvw-title').text('new text');

링크 텍스트를 바꿔야하는 문제가 있었지만 JavaScript를 사용할 수 없었거나 하이퍼 링크의 텍스트를 XML에서 컴파일하여 직접 변경할 수 없었습니다. 또한 의사 요소를 사용할 수 없거나 시도했을 때 작동하지 않는 것 같습니다.

기본적으로 원하는 텍스트를 범위에 넣고 앵커 태그를 그 아래에 놓고 둘 다 div로 감쌌습니다. 기본적으로 CSS를 통해 앵커 태그를 위로 이동 한 다음 글꼴을 투명하게 만들었습니다. 이제 스팬 위로 마우스를 가져 가면 링크처럼 "작동"합니다. 이 작업을 수행하는 정말 해킹 된 방법이지만 다른 텍스트와 링크를 가질 수있는 방법입니다 ...

이것은이 문제를 해결하는 방법의 바이올린입니다.

내 HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

내 CSS

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

CSS는 요구 사항에 따라 변경해야하지만 이것은 요청하는 것을 수행하는 일반적인 방법입니다.

작은 화면 너비에서 "Dark"라는 단어가 "D"로 단축되는 솔루션을 찾았습니다. 기본적으로 원본 콘텐츠의 글꼴 크기를 0으로 만들고 의사 요소로 단축 된 형식을 갖습니다.

이 예에서는 변경이 호버에서 대신 발생합니다.

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}

<span>Dark</span>

8 년이 지난 지금, 스타일리쉬 를 사용하려고 할 때도 같은 도전에 직면했습니다 브라우저 확장 프로그램을 웹 사이트 (내가 아닌)에서 무언가를 변경 . 이번에는 "inspect element"를 사용하여 소스 코드를 살펴보고이를 기반으로 CSS 코드를 만들었습니다.

이것이 이전처럼 보였습니다.

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

이것은 스타일을 수정하는 데 사용한 HTML 및 CSS와 동일합니다.

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

위의 코드를 실행할 수 있으며 작동하는지 확인할 수 있습니다 (Chrome에서 테스트).

_{이것은 내가이 질문을했던 시절에 내가 원했던 것입니다.}

_{나는 일종의 커뮤니티 블로그 / Myspace 와 비슷한 것들을 사용하고 있었고 프로파일을 스타일링 할 때 가지고있는 유일한 것은 CSS 편집기 였기 때문에 스타일을 기반으로 선택하고 싶었습니다.}

나는 여기서 답을 찾았습니다.

• 고급 CSS 선택기-스타일을 기반으로 선택

• 인라인 스타일 속성 별 CSS 선택기

이 작업을 수행하는 방법은 CSS 내용에 줄 높이를 추가하는 것입니다. 이렇게하면 숨겨진 블록 위에 블록이 표시되므로 변경된 텍스트를 숨기지 않습니다.

이전 에 사용한 예제 :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

글쎄, 많은 사람들이 말했듯이 이것은 핵입니다. 그러나, 나는의 장점 소요 더 최신의 해킹, 추가 할 flexbox하고 rem, 즉

• 이 텍스트를 수동으로 변경하여 변경하지 않으려면 다음과 같은 이점을 활용하십시오. flexbox
• 을 사용 하여 텍스트를 명시 적으로 사용 padding하고 싶지 않거나 다른 장치 및 브라우저의 화면 크기가 다르면 출력이 다를 수 있습니다.marginpx

여기에 해결책이 있습니다. 즉, flexbox자동으로 완벽하게 배치되고rem 픽셀에 대한보다 표준화 된 (및 자동화 된) 대안입니다.

아래 코드가 있고 스크린 샷 형식으로 출력 된 CodeSandbox 는 코드 아래를 읽으십시오 note!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

참고 : 다른 태그의 경우 다른 값이 필요할 수 있습니다 rem.이 값은 h1큰 화면에서만 사용할 수 있습니다. 그러나 @media이를 통해 모바일 장치로 쉽게 확장 할 수 있습니다.