팝업 텍스트의 위치를 ​​변경하는 방법은 무엇입니까?

Question

팝업 텍스트 (프랑스어)에 대한 CSS는 다음과 같습니다

.label-mobile-languageselector .popuptext { 
     visibility: hidden; 
     width: 360px; 
     background-color: #668A04 !important; 
     color: #fff; 
     text-align: left; 
     /* border-radius: 6px; */ 
     padding: .5px 0; 
     position: absolute; 
     z-index: 1; 
     bottom: -67%; 
     left: -271%; 
     margin-left: -80px; 
    } 

내 작업은 약간 위쪽으로 그림과 같이있는 바닥을 향해 팝업 텍스트 조금 이동하는 것입니다.

text-align 속성을 사용하여 팝업 텍스트의 위치를 ​​변경했지만 불행히도 아래쪽으로 이동할 수 없습니다.

text-align: center; 
text-align: left; 
text-align: right; 

팝업 텍스트 전에 이미지의 CSS (위 그림 참조)입니다 :

여기

.label-mobile-languageselector .popuptext:before { 

content:url('img/globe.png'); 
    display:inline-block; 
    float:left; 
    width: 30px; /* whatever width you need */ 
    height: 29px; /* whatever height you need */ 
    margin-right: 0.5em; /* whatever margin is needed to separate the image from the text */ 

} 

이 순간 팝업 이유는 확실하지 작동하지합니다 (fiddle입니다)

Answer 1

내 발췌 Fiddle :

.label-mobile-languageselector .popuptext { 
    visibility: hidden; 
    width: 360px; 
    background-color: #668A04 !important; 
    color: #fff; 
    text-align: left; 
    padding: 15px 0 0; 
     /* Added padding, adjust to your needs */ 
    position: absolute; 
    z-index: 1; 
    /*height: 29px !important;*/ 
     /* height removed */ 
    /*bottom: -67%;*/ 
     /* bottom removed */ 
    left: -271%; 
    top: 48px; 
     /* top added */ 
    margin-left: -80px; 
} 

.label-mobile-languageselector .popuptext::after { 
    content: ""; 
    position: absolute; 
    top: -16px; 
     /* top changed to the arrow height */ 
    left: 58.2%; 
    margin-left: -5px; 
    border-width: 8px; 
    border-style: solid; 
    border-color: #668A04 transparent transparent transparent; 
    transform: rotateX(180deg); 
}