リンクの装飾をしたいです。background-colorの範囲を指定するにはどうしたらいいでしょうか。

見出しの通り、リンクを貼り付けたボタンの装飾をしたいです。

・問題点
・<br>のみの指定だと、二行目の場所を変えられない。
二行目はリンクのリと同じ位置からスタートしたいのです。
※今回は一行目が短いですが、一行目が長い場合など、二行目を任意の位置からスタートできるようにしたいです。
・また、色の指定により、被ってしまっています。
背景色の指定により、文字とその周囲を一定範囲色をつけたいのですが、テキストに準拠して色をつけたらテキストの範囲しか色がぬれず困ってます。
大元のsectionの方に背景色つけて幅と高さを指定したら text-align: center;が無効になってしまい、なぜでしょうか。

お願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>サンプル</title>
6<link rel="stylesheet" href="sample.css">
7</head>
8<body>
9
10  <section class="pdflink">
11    <p class="btn"><a href="">リンク<br>(4MB)</a></p>
12  </section>
13
14</body>
15</html>

css
1.pdflink {
2  text-align: center;
3  padding-bottom: 20px;
4  margin: 20px 0;
5}
6
7.btn a {
8  color: #FFFFFF;
9  background-color: #005BAC;
10  text-decoration: none;
11  padding: 15px 24px;
12  margin:  0 auto;
13  text-align: left;
14}
15.btn a:hover {
16  opacity: 0.7;
17}
18.btn a:after {
19  content:" ";
20  display: inline-block;
21  width: 20px;
22  height: 20px;
23  margin-left: 20px;
24  background: url("") no-repeat;
25}

azuapricot

2019/12/16 05:45

文章だけじゃ最終的にどういった形にしたいのか全く伝わってきません。現状と理想形を図示して下さい

miyabi_pudding

2019/12/16 06:26

一応、ブラウザを記載してください。（IEだったら、色つきそうな気がする）

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

回答1件

ベストアンサー

a要素は、インライン要素なので、そのままでは、背景のスタイルは、ブロック要素と同じように効かせることはできません。
ブロックのように背景をつけたい、しかし、改行などの挙動はインラインっぽくしたいって時は下記のようにします。

css
1.btn a {
2  /* 下記を追加 */
3  display: inline-block;
4
5  color: #FFFFFF;
6  background-color: #005BAC;
7  text-decoration: none;
8  padding: 15px 24px;
9  margin:  0 auto;
10  text-align: left;
11}