Псевдоэлементы Overlap :: after и :: before с размещением текстового элемента - PullRequest
Новая
       8

Псевдоэлементы Overlap :: after и :: before с размещением текстового элемента

1 голос
/ 05 июля 2019

ОБНОВЛЕНИЕ:

Мне нужно скрыть @@ из текста, но сохранить его в HTML.

У меня есть элементы в HTML - <mark>@@Text@@</mark>, и в основном нужноскрыть @@ с начала текста и с конца.С псевдоэлементами, кажется, легко скрыться, но также необходимо убрать пробел и желтый фон из того места, где находятся псевдоэлементы. 

mark {
  position: relative;
  color: red;
}

mark::before {
  content: '@@';
  position: absolute;
  color: yellow;
  left: 0;
}

mark::after {
  content: '@@';
  position: absolute;
  color: yellow;
  right: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <mark>@@Some Text@@</mark> |
  <mark>@@Some Text@@</mark> |
  <mark>@@Some Text@@</mark>
</body>
</html>

Приведенный выше код дает такой результат:

enter image description here

Пока мне нужно:

enter image description here

DEMO

пс, вы можете увидеть в демо странное поведение -удалите строку из CSS, и результат будет выглядеть как на моем первом изображении.Напечатайте что-нибудь в HTML, и оно снова будет тормозить.Не знаю, почему это происходит, но, по возможности, хотел бы получить и некоторое представление об этом.

Ответы [ 3 ]

3 голосов
/ 05 июля 2019

В комментариях вы сказали:

Может быть, решение с Javascript тогда ...?

Я получаю в виде строки, а затем создать отметку и установить innerhtm

Первоначально мое решение (под строкой ниже) состояло в том, чтобы просто удалить их при получении, но вы сказали, что вы должны сохранить их в HTML.

Итак, вы заключаете их ввстроенный элемент и скрыть их, например: 

mark.innerHTML = theString.replace(/</g, "&lt;")
                          .replace(/&/g, "&amp;")
                          .replace(/^@@|@@$/g, "<span class=at>$&</span>");

(Первые две замены должны пометить < и &, чтобы мы могли использовать innerHTML. Удалите их, если строка означало иметь HTML-разметку.)

С этим CSS: 

span.at {
    display: none;
}

(Обратите внимание, что я предполагаю, что эти @@ появляются только в реальном тексте, а нев значениях атрибутов.)

Live Пример: 

const theString = "@@SOME TEXT@@";

const mark = document.createElement("mark");
mark.innerHTML = theString.replace(/</g, "&lt;")
                          .replace(/&/g, "&amp;")
                          .replace(/^@@|@@$/g, "<span class=at>$&</span>");
document.body.appendChild(mark);
span.at {
    display: none;
}

Исходное решение:

Тогда, безусловно, лучше всего удалить эти @, когда вы сделаете это: 

mark.innerHTML = theString.replace(/^@@|@@$/g, "");

Пример: 

const theString = "@@SOME TEXT@@";

const mark = document.createElement("mark");
mark.innerHTML = theString.replace(/^@@|@@$/g, "");
document.body.appendChild(mark);

Помните, что при установке innerHTML строка читается как HTML , а не как обычный текст.Так что, если «НЕКОТОРЫЙ ТЕКСТ» содержит символы, которые являются особыми в HTML, но должны трактоваться буквально, результат не будет хорошим: 

const theString = "@@<SOME TEXT>huh? where did the rest go?@@";

const mark = document.createElement("mark");
mark.innerHTML = theString.replace(/^@@|@@$/g, "");
document.body.appendChild(mark);

В этом случае явно создайте текстовый узел: 

mark.appendChild(document.createTextNode(theString.replace(/^@@|@@$/g, "")));

Пример: 

const theString = "@@<SOME TEXT>ah, there it is@@";

const mark = document.createElement("mark");
mark.appendChild(document.createTextNode(theString.replace(/^@@|@@$/g, "")));
document.body.appendChild(mark);
2 голосов
/ 05 июля 2019

Ниже приведено решение взломать , и его следует использовать с осторожностью (или вообще не использовать ...) 

/* 1.8em is approximately the width of @@, adjust it if needed */

mark {
  position: relative;
  display: inline-block;
  text-indent:-1.8em;  /* Hide the @@ at the left*/
  margin-right:-1.8em; /* Reduce the width of @@ from the right*/
  overflow: hidden; /* Hide the overflow on the left*/
  vertical-align: middle;
  /* Color only the text*/
  background:
    linear-gradient(red,red) left/calc(100% - 1.8em) 100% no-repeat;
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
/* Replace the yellow background */
mark:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:1.8em;
  bottom:0;
  background:yellow;
}
<mark>@@Some Text@@</mark> |
<mark style="font-size:28px;">@@Some more Text@@</mark> |
<mark>@@Text@@</mark>
0 голосов
/ 08 июля 2019

попробуй с javascript 

var str = document.getElementsByClassName('mark');

for(var i =0; i <= str.length; i++){
  var res = str[i].innerText.replace("@@", "");
    str[i].innerText = res.replace('@@','');
}
...