【CSS】電話番号へのリンクで「電話する」ボタンを作成する（768px以上では「PCでは電話できません」表示）

<a href="tel:03-1234-5678">03-1234-5678</a>

<meta name="format-detection" content="telephone=no">

@media screen and (min-width: 768px){
		a[href^="tel:"]{
		pointer-events: none;
	}
}

.tel-btn a{
	margin:0 auto;
	display:block;
	text-align:center;
	background-color:#666;
	color:#fff;
	padding:10px;
	text-decoration:none;
	width:250px;
}
.tel-btn a:hover{
	background-color:#ccc;
	color:#000;
}
.tel-btn a[href^="tel:"]::before{
	content: '\f095';
	font-family: 'Fontawesome';
	margin-right:.1em;
}
.tel-btn a[href^="tel:"]::after{
	content: 'スマホから電話する';
	margin-left:.1em;
}
@media screen and (min-width: 768px){
	.tel-btn a[href^="tel:"]{
		pointer-events: none;
	}
	.tel-btn a[href^="tel:"]::before{
		content: '\f3dd';
  		font-family: 'Fontawesome';
		margin-right:.1em;
	}
	.tel-btn a[href^="tel:"]::after{
		content: 'PCでは電話できません';
		margin-left:.1em;
	}
}