Resimde gözüktüğü gibi "A Şıkkındaki yazı" mobil versiyonda güzel görüntü vermiyor. Alt çizginin "çekilmesi" kelimesi altına nasıl alabilirim?
kodlar aşağıdadir..
https://i.hizliresim.com/lOE3Pk.png
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS ToolTip Smooth animation</title>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,300italic,400italic,600italic'>
<style>
/* Start Fonts from Google Fonts */
/*Google Fonts*/
@import url('https://fonts.googleapis.com/css?family=Arapey|Cantarell|Comfortaa|Khand|Russo+One|Ubuntu');
/*End Fonts*/
/* Start Body */
body {
/* background: #EEE; */
background: url("https://s16.postimg.org/4d17gd0vp/smbg.png");
margin: 0;
padding: 0;
box-sizing: border-box;
color: #444;
font-family: 'Comfortaa', cursive;
text-align: center;
font: 16px;
background-image: url();
}
/* End Body */
h1{
margin-bottom: 7%;
}
/*tooltip Box*/
.con-tooltip {
position: relative;
border-radius: 9px;
padding: 0 20px;
margin: 10px;
display: inline-block;
transition: all 0.3s ease-in-out;
cursor: default;
color: #FFF;
background-color: #333;
}
/*tooltip */
.tooltip {
visibility: hidden;
z-index: 1;
opacity: .40;
width: 60%;
color: #333;
position: absolute;
top:-140%;
left: -25%;
border-radius: 9px;
transform: translateY(9px);
transition: all 0.3s ease-in-out;
box-shadow: 0 0 3px rgba(56, 54, 54, 0.86);
font-size: 16px;
background-color: #FFF;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
text-align: center;
}
/* tooltip after*/
.tooltip::after {
content: " ";
width: 0;
height: 0;
border-style: solid;
border-width: 12px 12.5px 0 12.5px;
border-color: #333 transparent transparent transparent;
position: absolute;
left: 40%;
}
.con-tooltip:hover .tooltip{
visibility: visible;
transform: translateY(-10px);
opacity: 1;
transition: .3s linear;
animation: odsoky 1s ease-in-out infinite alternate;
}
@keyframes odsoky {
0%{
transform: translateY(6px);
}
100%{
transform: translateY(1px);
}
}
/*hover ToolTip*/
.left:hover {transform: translateX(-6px); }
.top:hover {transform: translateY(-6px); }
.bottom:hover {transform: translateY(6px);}
.right:hover {transform: translateX(6px); }
/*left*/
.left .tooltip{ top:-20%; left:-170%; }
.left .tooltip::after{
top:40%;
left:90%;
transform: rotate(-90deg);
}
/*bottom*/
.bottom .tooltip { top:115%; left:-20%; }
.bottom .tooltip::after{
top:-17%;
left:40%;
transform: rotate(180deg);
}
/*right*/
.right .tooltip { top:-20%; left:115%; }
.right .tooltip::after{
top:40%;
left:-12%;
transform: rotate(90deg);
}
h3 {
background: #333;
color: #E086D3;
padding: 10px 20px;
border-radius: 56px;
width: 8em;
margin: 20% auto 1% auto;
}
body,td,th {
font-family: Comfortaa, cursive;
}
.orta {
padding: 20px;
background-color: #FFF;
color: #333;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
font-weight: normal;
line-height: 21px;
text-align: left;
}
.ustyazi {
padding: 15px;
background-color: #cc3333;
color: #FFF;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 21px;
text-align: center;
}
.ustyaziCopy {
padding: 15px;
color: #333;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
font-weight: bold;
line-height: 21px;
text-align: center;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
}
.sss {
color: #333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
height: 30px;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p><!-- con = The Container for items --></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="orta">
<td align="center" class="ustyazi">SORU | 11</td>
</tr>
<tr class="orta">
<td class="orta"><p><strong>Tanzimat Dönemi gelişmeleri arasında aşağıdakilerden hangisi gösterilemez? </strong><br>
</p>
<p class="sss">A) İstanbul - Edirne arasına ilk telgraf hattının çekilmesi <br>
</p>
<p class="sss">B) İlk demir yolu hattının açılması <br>
</p>
<p class="sss">C) Encümeni Danişin açılması <br>
</p>
<p class="sss">D) Mürur Tezkeresinin uygulanması <br>
</p>
<p class="sss">E) İltizam sisteminin kaldırılması</p>
<div class="con-tooltip right">
<p> CEVAP</p>
<div class="tooltip ">
<p>D</p>
</div>
</div></td>
</tr>
</table>
<div class="con">
<!-- Left tooltip --><!-- Top tooltip--><!-- Bottom tooltip--><!-- Right tooltip--><!-- End con = Container-->
</div>
</body>
</html> 
