ボタンと矢印の位置固定について

前提・実現したいこと

htmlとcssのみでボタンを作成しています。
https://www.ditjapan.com/サイトの「EVENT INFO」のようなボタンを作成しようとしております。
hover時、矢印を伸ばそうとすると、align="center"にしているため、
矢印が伸びた分の幅もあわせて真ん中をとって、ボタン本体が左にずれます。
・ボタン本体の位置は固定
・矢印の始点位置も固定
としたい場合はどこを修正すればよろしいでしょうか…
（position: absolute;なのかなと思ってます…）

該当のソースコード

html
1<div class="border" align="center">
2<span id="box">
3  お問い合わせ
4</span>
5<span id="arrow"></span>
6</div>

css
1<style type="text/css">
2.border #box{
3  display: inline-block;
4    text-align: center;
5    font-size: 12px;
6    width: 300px;
7    border: 1px solid #000;
8    padding: 10px;
9	margin: 30px;
10	position: relative;
11    transition: all .3s
12
13}
14 
15.border #box::before {
16    position: absolute;
17	content: '';
18	width: calc(100% + 8px);
19	height: calc(100%);
20    
21	border: 1px solid #000;
22	position: absolute;
23    top: -1px;
24	left: -5px;
25    transition: all .3s
26}
27.border:hover #box {
28    text-align: center;
29    font-size: 12px;
30    width: 175px;
31	border-top: 1px solid #000;
32    border-bottom: 1px solid #000;
33    border-left: 0px;
34    border-right: 0px;
35    padding: 10px;
36	margin: 30px; 
37	position: relative;
38}
39.border:hover #box::before {
40	content: '';
41	width: calc(100%);
42	height: calc(100% + 4px);
43	border-top: 1px solid #000;
44    border-bottom: 1px solid #000;
45    border-left: 0px;
46    border-right: 0px;
47	position: absolute;
48    top: -3px;
49	left: 0px;
50}
51.border #arrow {
52  display:inline-block;
53  height:1px;
54  width:40px;
55  background-color:#000;
56  position:relative;
57  top:-5px;
58  left:-50px;
59  transition: all .3s
60}
61
62.border #arrow::after {
63  position:absolute;
64  content:"";
65  width:0;
66  height:0;
67  border:4px solid transparent;
68  border-left:4px solid #000;
69  left:40px;
70  top:-3px;
71  transition: all .3s
72}
73.border:hover #arrow {
74  display:inline-block;
75  height:1px;
76  width:80px;
77  background-color:#000;
78  position:relative;
79  top:-5px;
80  left:34px;
81}
82
83.border:hover #arrow::after {
84  position:absolute;
85  content:"";
86  width:0;
87  height:0;
88  border:4px solid transparent;
89  border-left:4px solid #000;
90  left:80px;
91  top:-3px;
92}
93</style>

Lhankor_Mhy

2020/06/27 02:23

ご存知かと思いますが、align属性は廃止されています。 https://developer.mozilla.org/ja/docs/Web/HTML/Element/div#Attributes

gumin

2020/06/29 04:39

浅学のため、廃止されたこと気づいておりませんでした…。昔中途半端に学んだHTMLの知識を活用するとよくないのですね。ありがとうございます！

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

回答2件

ベストアンサー

#box や #arrow のボックスのサイズを変更してしまうと、お互いに影響しあって、位置の固定が複雑になります。

#box や #arrow の位置やサイズは固定にしておいて、罫線や矢印は ::before や ::after で表示させて、それのサイズを変更するのがシンプルだと思います。

css
1.border {
2  text-align: center;
3}
4.border #box{
5  display: inline-block;
6  text-align: center;
7  font-size: 12px;
8  width: 300px;
9  padding: 10px;
10  margin: 30px;
11  position: relative;
12}
13/* ボタンの罫線 */
14.border #box::before, .border #box::after {
15  position: absolute;
16  content: '';
17  height: 100%;
18  border: 1px solid #000;
19  position: absolute;
20  top: -1px;
21  bottom: -1px;
22  left: 0;
23  right: 0;
24  transition: all .3s
25}
26.border #box::after {
27  left: -5px;
28  right: -5px;
29}
30
31.border:hover #box::before, 
32.border:hover #box::after {
33  border-left: none;
34  border-right: none;
35  left: 62px;
36  right: 62px;
37}
38.border:hover #box::after {
39  top: -3px;
40  bottom: -3px;
41}
42
43.border #arrow {
44  display:inline-block;
45  width:40px;
46  position:relative;
47  top:-5px;
48  left:-50px;
49  transition: all .3s
50}
51/* 矢印の罫線 */
52.border #arrow::before {
53  position:absolute;
54  content:"";
55  height:1px;
56  width:40px;
57  top: 1px;
58  left:0;
59  background-color:#000;
60  transition: all .3s
61}
62.border:hover #arrow::before {
63  width:80px;  
64}
65/*矢印の三角*/
66.border #arrow::after {
67  position:absolute;
68  content:"";
69  width:0;
70  height:0;
71  border:4px solid transparent;
72  border-left:4px solid #000;
73  left:40px;
74  top:-3px;
75  transition: all .3s
76}
77.border:hover #arrow::after {
78  left:80px;
79}

CodePenサンプル

投稿2020/06/27 06:47

hatena19

総合スコア33699

gumin

2020/06/29 04:49

なるほど。疑似属性のみで表現するのが今回の場合はよかったのですね。お蔭様でボタンのセンターも矢印の始点位置も固定された状態で伸縮するようになりました！ありがとうございます！求めている回答に一番近かったため、ベストアンサーとさせていただきます。

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

position: absolute;なのかなと思ってます…

正にその通りだと思います。

サンプル

css
1
2.border #arrow {
3  display: flex;
4  position: absolute;
5  height: 1px;
6  width: 40px;
7  background-color: #000;
8  transform: translateX(150px);
9  justify-content: end;
10  transition: 0.3s;
11}
12
13.border #arrow::after {
14  content: "";
15  display: block;
16  width: 0;
17  height: 1px;
18  border: 4px solid transparent;
19  border-left: 4px solid #000;
20  transform: translate(8px,-4px);
21}
22.border:hover #arrow {
23  width:80px;
24}
25
26.border {
27  display: flex;
28  justify-content: center;
29  align-items: center;
30}
31