CSSで{display:none;}にしたところに、新しくテキストを挿入したい

前提・実現したいこと

ワードプレスでwebサイトを作りました。

使用しているプラグインで自動生成されたページ（2段落目以降）が不要なので
下記コードで削除しました。
div.col-2{
display:none;
}

で、質問はここからです。
この削除した部分に、「新規登録はこちら」というテキストリンクを表示させたいのですが
どう追記すればいいのかわかりません。

アドバイスよろしくお願いいたします。

該当のソースコード

div.col-2{
display:none;
}

試したこと

とりあえず文字だけでも入れられるようにしてみようと思って
下記記述してみましたが、変化ありませんでした
div.col-2{
display:none;
content:"★★";
}

m.ts10806

2020/03/28 05:47

HTMLもご提示ください。ただdisplay:none;は「削除」ではないので、やろうとしていることや概念等間違ったまま手法を模索しようとしてないか気になります

m.ts10806

2020/03/28 05:48

いずれにしてもCSSで対応することではないような気がします。 WordPressに特化した対応が必要な可能性もありますし、「WordPress」を質問タグに追加しただけますか？

行動規範の内容に同意します

回答1件

ベストアンサー

まず、content が使えるは、疑似要素(::before ::after)のみです。
また、display: none; するとそのブロック自体が非表示になりますので、疑似要素も非表示になります。
対応として、下記のように子要素全体を非表示にするようにして、疑似要素に content を設定すればよさそうです。

css
1div.col-2 > *{
2  display: none;
3}
4
5div.col-2::before {
6  content:"★★";
7}

投稿2020/03/28 05:55

総合スコア34075

2020/03/28 06:14 編集

あ！なるほど！なんかいい感じにテキスト追加できました！！あとはリンクを追加できれば完成なのですが下記コードだとエラー表示になりました。何か間違っているのでしょうか？？ div.col-2::before { content:"<a href="https://sample.com/" target="_blank" rel="noopener">★★</a>"; }