質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • CSS

    8364questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

テキストリンクの下線の位置が文字から離れているのを近付けたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 484

yuri-a

score 7

前提・実現したいこと

はてなブログにてCSSを調整しているのですが、
ブログ記事の本文において、テキストリンクの下線の位置が文字から離れているのを近付けたいです。
どのようにコードを書き換えたら下線を適切な位置に設定できるのか、教えていただきたいです。

発生している問題・エラーメッセージ

テキストリンクの下線の位置が離れている

該当のソースコード

.entry-content {
    line-height: 1.5;
}
.etnry-content p {
    margin:0 0 0 0;
    padding:0 0 0 0;
}
.entry-content p a {
    color: #c97a2b;
    text-decoration: none;
    border-bottom: solid 1px;
    padding-bottom: 0px;
}
<div id="content" class="hfeed"

  >
  <div id="content-inner">
    <div id="wrapper">
      <div id="main">
        <div id="main-inner">

  <!-- google_ad_section_start -->
  <!-- rakuten_ad_target_begin -->

        <article class="entry hentry js-entry-article date-first autopagerize_page_element chars-200 words-100 mode-hatena entry-odd" id="entry-10257846132696381166" data-keyword-campaign="" data-uuid="10257846132696381166" data-publication-type="entry">
  <div class="entry-inner">
    <header class="entry-header">

    <div class="date entry-date first">
    <a href="URL" rel="nofollow">
      <time pubdate datetime="2019-01-03T14:53:47Z" title="2019-01-03T14:53:47Z">
        <span class="date-year">2019</span><span class="hyphen">-</span><span class="date-month">01</span><span class="hyphen">-</span><span class="date-day">03</span>
      </time>
    </a>
  </div>
  <h1 class="entry-title">
  <a href="URL" class="entry-title-link bookmark">【テスト】</a>
</h1>
  <div class="entry-categories categories">

    <a href="URL" class="entry-category-link category-雑記">雑記</a>

  </div>
</header>
    <div class="entry-content">
    <p>テストテストテストテストテストテスト<br />
テストtest3<a href="URL">&#x30C6;&#x30B9;&#x30C8;</a>テスト<br />
テストテストテストテストテストテスト</p>

</div>

  <footer class="entry-footer">

    <p class="entry-footer-section">
  <span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="aso">aso</span></span>
  <span class="entry-footer-time"><a href="URL"><time data-relative datetime="2019-01-03T14:53:47Z" title="2019-01-03T14:53:47Z" pubdate class="updated">2019-01-03 23:53</time></a></span>
</p>

試したこと

①「line-height」の値を調整
テキストを反転して見てみると、テキストの上下の余白が少し大きいので、
それが原因かな?と思い、「line-height」の値を調整してみましたが、下線には影響なし。
テキストの上下の余白が大きいのが原因?
line height: 0.8;
↑の状態で反転してみると、テキスト上下の余白は変化なし

②「border-bottom」ではなく「text-decoration:underline」に変更
下線は表示されなくなる。親要素のせい?
text-decoration:underlineにしてみた
親要素?で無効にされてるから?

③「padding-bottom」の値を調整
「padding-bottom」の値を「0」から「10」に変更すると、下線が離れる。
そこで「-10」にしてみたが、「0」より上には行ってくれない。。
padding-bottom: 10px;
padding-bottom: 0px;
padding-bottom: -10px;

④「entry-content p」のpaddingの値を調整
padding-bottomを「0」から「-10」とかにしてみたけど、変化なし。
padding:0 0 -10px 0;

⑤親要素の影響を確認
CSSファイルの上のほうで全体に関わる指定をしてるところを確認してみて、
wrapperとかかな?と思いつつ、それらしき要因を見つけられず。。
全体のレイアウト指定

補足情報(FW/ツールのバージョンなど)

「.entry-content」と「.entry-content p」の違いがよく分かっていないので適当に記述してしまってるのですが、それも関係あるのでしょうか。。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2019/01/05 02:13

    HTMLも提示してください。

    キャンセル

回答 1

checkベストアンサー

+2

なるべく全体のCSSとHTMLを提示したほうが解決しやすいと思います。
important指定は使わないほうが良いですが、とりあえず。

.entry-content p a {
    text-decoration: underline !important;
}

また、paddingにマイナス値はありません。
どういうCSSが影響しているかはデベロッパーツールで確認してみてください。

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/


追記:

text-decoration: none; の状態で border-bottomを下にぴったり付けたい場合、display: inline-block; line-height: 1; を付けると とりあえずできる。

p {
    line-height: 1.8;
}
a {
    border-bottom: 2px solid green;
    line-height: 1;
    display: inline-block;
    text-decoration: none;
}

動くサンプル:https://jsfiddle.net/zu4acm7p/

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • CSS

    8364questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。