CSSでaタグの親要素であるpタグの領域までリンク反応領域を広げたい

前提・実現したいこと

下のソースコードに記載してあるとおり、CSSでaタグの親要素であるpタグまで、リンクの反応領域を広げたいと思っています。
下の参考サイトを見ながら、親要素をブロックレベルにしたり等々CSSの変更を加えてみたのですが、親要素のpadding部分にまで反応領域が広がっていない状態です。
padding部分まで広げる方法に関して、ヒントなどいただけたら嬉しいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4
5</head>
6<body>
7  <p>
8    <a href="https://example.com">example.comへのリンク</a>
9  </p>
10</body>
11</html>

CSS
1a {
2  background-color: blue;
3  display: block;
4  height: 100%;
5  width: 100%;
6}
7
8p {
9  background-color: red;
10  display: block;
11  height: 100px;
12  width: 200px;
13  padding: 10px;
14}

参考

参考サイト

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

回答3件

CSS
1a {
2  background-color: blue;
3  display: block;
4  height: 100%;
5  width: 100%;
6}
7
8a::after {/* ADD */
9  content: '';
10  background-color: pink;
11  display: block;
12  position: absolute;
13  top: 0;
14  bottom: 0;
15  left: 0;
16  right: 0;
17}
18
19p {
20  background-color: red;
21  display: block;
22  height: 100px;
23  width: 200px;
24  padding: 10px;
25  position: relative;/* ADD */
26}
27```**動くサンプル：**[https://jsfiddle.net/rpwoh02y/](https://jsfiddle.net/rpwoh02y/)

投稿2019/03/19 03:40

kei344

総合スコア69398

CSS
1<style>
2a {
3  background-color: blue;
4  display: block;
5  height: 100px;
6  width: 200px;
7}
8p {
9display:inline;
10}
11</style>
12<p>
13    <a href="https://example.com">example.comへのリンク</a>
14</p>

投稿2019/03/19 03:56

yambejp

総合スコア114767

ベストアンサー

marginにマイナス値を設定する方法もあります。

css
1a {
2  background-color: blue;
3  display: block;
4  height: calc(100% + 20px);
5  width: calc(100% + 20px);
6  margin: -10px;
7}

投稿2019/03/21 14:25

cerfweb

総合スコア1899

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

CSSでaタグの親要素であるpタグの領域までリンク反応領域を広げたい

前提・実現したいこと

該当のソースコード

参考

関連した質問