如何更改弹出文本的位置？

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

摘自here：

.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); 
}