ここから本文です

お世話になります リンクの前にマークを付ける方法について 現時点で <span c...

アバター

ID非公開さん

2018/3/2306:43:56

お世話になります

リンクの前にマークを付ける方法について
現時点で
<span class="link">リンク</span>

<a href="https://hogehoge.com/" target="_blank">ほげほげ</a>
と記述してマークをcssでいじっていますがこれでは後々cssで管理しにくいですよね。

本来は
<span class="link">
<a href="https://hogehoge.com/" target="_blank">ほげほげ</a>
</span>
こんな感じで書いて、beforeとかでリンクの前にマークを付けていじったりするんだと思いますがどう記述すれば良いのでしょうか?

閲覧数:
35
回答数:
1

違反報告

ベストアンサーに選ばれた回答

gar********さん

2018/3/2308:01:36

話の順番的に HTML を

<a class="link" href="//hogehoge.com/">ほげほげ</a>

とした場合から始めます。
これだと装飾に使えるのは下の 2 つです。

.link::before {}
.link::after {}

装飾に文字を使う場合は下のようにします。

.link::before {
content: "文字列";
margin-right: 5px;
}

表示位置の制御をもっと緻密にしたい場合は下のようにします。

.link {
position: relative;
}
.link::before {
content: "文字列";
position: absolute;
top: 5px;
left: 5px;
}

ここで理解しておきたいのは ::before 、 ::after は .link の子要素だという点です。
.link の margin の影響を受けませんが、 padding の影響を受けます。
また「ほげほげ」は ::before 、 ::after の margin の影響を受けます。


次に ::before 、 ::after で図形を作るには下のようにします。

.link::before {
content: ""; /* このプロパティは必須です */
display: block;
width: 10px;
height: 10px;
background-color: #f80;
}
.link::after {
content: "";
display: block;
width: 10px;
height: 10px;
background-color: #f80;
border-radius: 50%;
}

::before が正方形、 ::after が円です。
画像を用いない場合は、上記のような図形を組み合わせて形を作ります。
図形の中に content: "✔"; などとして文字を入れることもできます。


画像を用いるには下のようにします。
.link::before {
content: url(/images/hogehoge.png);
}


ここまでの方法で要素が足りない場合は、下のような HTML にして追加します。

<span class="link">
<a href="//hogehoge.com/">ほげほげ</a>
</span>


ちなみに、ググったりすると :before というコロンが 1 個の表記を多く見掛けると思いますが、これは古い表記方法です。
その表記でも問題なく処理されますのでどうでもいい気はするのですが、まぁそういうことです。


それから、本題から外れますが「 target="_blank" を付けたリンクに必ず表示したい」というような場合は下のようにすることもできます。

a[target="_blank"] {
~~~
}

場合によっては下のようにして表示する範囲を制限することもできます。

.entry-content a[target="_blank"] {
~~~
}

  • アバター

    質問者

    ID非公開さん

    2018/3/2413:02:46

    ありがとうございます。
    a にclass="link"を付けるという方法があったのですね。

    一番最初に書いていただいた方法でcssは

    .link::before {
    content: "リンク";
    padding: 2px 4px;
    color: white;
    background-color: #0099CC;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0px;
    line-height: 1.2;
    margin: 0px 2px 0px 0px;
    display: inline-block;
    border: 1px solid #0099CC;
    border-radius: 4px;
    }

    としたのですが、思った通りうまく表示されているのですが、これでも問題ないですよね?

  • その他の返信(1件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

アバター

質問した人からのコメント

2018/3/25 01:40:25

ありがとうございましたm(_ _)m

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる