[css] 텍스트를 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>

버튼 텍스트 :

와 :before

큰 screenxxx

큰 화면
와 :after

xxx 큰 화면

큰 화면